html - CSS3 过渡悬停在嵌套的 div 上

Question

我在 ccs3 悬停过渡到嵌套的 div 元素时遇到了一些问题。似乎当我 MOUSE_OVER img_cover 它播放动画但是当将鼠标移到 img_one 容器中的任何内容时它开始播放 MOUSE_OUT 动画即使我还在在父分区中。这是一个不需要的效果，我只想在移出父 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);


}​
​

Answer 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/

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