将CSS3转换悬停在嵌套div上

Question

我在嵌套div元素上发生ccs3悬停转换时出现了一些问题。看起来，当我将鼠标移动到img_one容器中的任何东西上时，它开始播放动画，即使我仍然处于父级div中。这是一个不希望的效果，我只想玩MOUSE_OUT当我移出父div（img_one容器）。我究竟做错了什么？

我为演示创建了一个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/

这将选择当父元素悬停在图像，使触发元件仅仅是父，而不是图像本身，但动画的图像。 :)