悬停CSS过渡 [英] CSS Transition on Hover

问题描述

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

I have a problem. I actually try to do a transition at a div when I hover the mouse over an object. So basically I have a div, and when I hover my mouse the div, it should display another div at the top of it, however it should be transitioned, so the hover effect would be smoother.

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

How is it possible, if I have these two divs?

<div id="first">

  <div id="on-hover">

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

  </div>

</div>

推荐答案

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

More information can be read here: http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/ I do need to explicitly mention that this may not work in IE9 and below. IE10 seems to work according top the docs. If needed, you can simulate the effect with javascript, but the question was CSS.

这篇关于悬停CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！