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

這將選擇當父元素懸停在圖像，使觸發元件僅僅是父，而不是圖像本身，但動畫的圖像。 :)