Question

我在嵌套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);


}

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/

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

CSS3过渡悬停在嵌套的div上

1 个答案: