CSS3 过渡悬停在嵌套的 div 上答案

【问题标题】：CSS3 transition hover over nested divsCSS3 过渡悬停在嵌套的 div 上
【发布时间】：2016-12-13 23:57:13
【问题描述】：

我在嵌套 div 元素上的 ccs3 悬停过渡时遇到了一些问题。似乎当我 MOUSE_OVER img_cover 它播放动画但是当将鼠标移到 img_one 容器中的任何内容上时它开始播放 MOUSE_OUT 动画，即使我仍然在在父 div 中。这是一个不受欢迎的效果，我只想在离开父 div（img_one 容器）时播放 MOUSE_OUT。我做错了什么？

我为演示创建了一个 Jsfiddle。

http://jsfiddle.net/6wrdD/16/

---------------------------
| img_one  container      |
|  ____________________   |
|  |kool_mask         |   |
|  |------------------|   |   
|  |text              |   |
|  |button            |   |
|  |__________________|   |
|                         |
|  ____________________   |
|  |img_cover         |   |
|  |__________________|   |
---------------------------

代码：[HTML]

<div class="image_one">

    <div class="kool_mask">
        <h5> Heading </h5>
        <div class="p2"> Text </div>

        <a href="#"><input type="button" id="kool_buttons" value="launch">  </a>

    </div>
<div id="imgcover"> <img src="http://blogs.lib.utexas.edu/texlibris/files/HAL-9000.jpg" alt="" /> </div>
</div>

代码：[CSS]

.kool_mask 

{
background: rgba(66, 72, 71, 0.7);

position:relative;
width:288px;
height:250px;

top:0;
left:0;
}

.image_one
 {
position:relative;
width:288px;
height:250px;



}

.kool_mask a 
{

color:#ffffff;
}


#imgcover
{
top:0;
left:0;
position:absolute;
width:288px;
height:150px;

 -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;


}

#imgcover:hover
{

-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;

  /* Firefox */

-moz-transform: scale(0) rotate(320deg) translate(50px);

/* WebKit */

-webkit-transform: scale(0) rotate(320deg) translate(50px);

/* Opera */

-o-transform: scale(0) rotate(320deg) translate(50px);

/* Standard */

transform: scale(0) rotate(320deg) translate(50px);

}

h5 
{
font-size: 16px;
color: #FFFF00;
text-align:center;
background-color: #000000;
margin-right: 470px;
margin-left: 100px;
padding-top: 2px;
padding-left: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;

}


.kool_buttons {
text-align:center;
width:50px;
height:50px;
border:1px solid black:

background: rgba(66, 72, 71, 0.7);


}

【问题讨论】：

标签： html css

【解决方案1】：

只需将#imgcover:hover 选择器更改为.image_one:hover #imgcover：

.image_one:hover #imgcover
{

-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
...

http://jsfiddle.net/Kyle_/6wrdD/17/

这会在父元素悬停时选择图像，以便触发元素只是父元素而不是图像本身，而是为图像设置动画。 :)

【讨论】：

Blarg，我试过了，但我在 imgcover 中遗漏了 ID 标签，所以我认为这不正确。谢谢！
呵呵，一般都是小错误:)