0

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

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

<div id="first">

  <div id="on-hover">

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

  </div>

</div>
4

6 回答 6

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

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

于 2013-03-31T16:51:21.357 回答
1

您使用 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。

于 2013-03-31T16:53:07.393 回答
1

我很快模拟了一些可以用 css3 转换演示 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;
}
于 2013-03-31T16:53:38.343 回答
0

更平滑是指淡入吗？这是一个淡入的例子#on-hover。我pointer-events:none习惯于忽略 hover on<img>并将事件传递给它的 parent #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;
}
于 2013-03-31T16:49:22.733 回答
0

使用伪选择器: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/

于 2013-03-31T16:52:20.393 回答
-1

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

于 2013-03-31T16:53:40.163 回答