我在嵌套 div 元素上的 ccs3 悬停过渡时遇到了一些问题。似乎当我MOUSE_OVER img_cover 它播放动画但是当将鼠标移到 img_one 容器中的任何内容上时，即使我仍在父 div 中，它也会开始播放MOUSE_OUT动画。这是不受欢迎的效果，我只想在移出父 div（img_one 容器）时播放MOUSE_OUT 。我究竟做错了什么？
我为演示创建了一个 Jsfiddle。
---------------------------
| 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);
}