Question

我有问题。当我将鼠标悬停在一个物体上时，我实际上尝试在div处进行转换。所以基本上我有一个div，当我将鼠标悬停在div上时，它应该在它顶部显示另一个div，但它应该被转换，所以悬停效果会更平滑。

如果我有这两个div，怎么可能？

<div id="first">

  <div id="on-hover">

    <img src="example-image.png" />

  </div>

</div>

Answer 1

#on-hover {
    opacity: 0;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
#first:hover #on-hover {
    opacity: 1;
}

这只是关于动画。这里有一个更详细的例子：http://jsfiddle.net/ELa6X/

Answer 2

您使用CSS3过渡：

#on-hover {
    opacity:0;
    /* Firefox */
    -moz-transition-property: opacity;
    -moz-transition-duration: 2s;
    -moz-transition-delay: 1s;
    /* WebKit */
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    /* Opera */
    -o-transition-property: opacity;
    -o-transition-duration: 2s;
    -o-transition-delay: 1s;
    /* Standard */
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 1s;
}
#on-hover:hover {
    opacity:1;
}

完整的工作：http://jsfiddle.net/djwave28/CuNkZ/2/

可在此处阅读更多信息：http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/ 我确实需要明确提到这可能不适用于IE9及以下版本。 IE10似乎按照文档顶部工作。如果需要，您可以使用javascript模拟效果，但问题是CSS。

Answer 3

我很快就用css3过渡demo jsfiddle

模拟了一些可以做到的事情

#on-hover {
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  opacity:0;
}

Answer 4

更平滑你的意思是淡入？这是一个淡入#on-hover的例子。我使用pointer-events:none忽略悬停在<img>上并将事件传递给其父#on-hover。

jsFiddle

#first,
#on-hover {
    width:100px;
    height:100px;
}

#first {
    background-color:#F00;
}

#on-hover {
    opacity:0;
    background-color:#0F0;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
}

#on-hover:hover {
    opacity:1;
}

#on-hover img {
    pointer-events:none;
}

Answer 5

使用伪选择器:hover。

#first:hover > #on-hover{
    opacity:1;
}

#on-hover{
    opacity:0;
    -webkit-transition: opacity 0.5s;
}

#first{
    width:300px;
    height:200px;
}

http://jsfiddle.net/charlescarver/V8PK3/1/

Answer 6

我建议使用jQuery和animate()。你可以使用CSS，但是你会遇到旧浏览器的问题。

悬停的CSS转换

6 个答案: