有没有办法在鼠标悬停时设置转换速度

Question

在鼠标上交换图像时，是否有CSS方法甚至javascript方法可以设置转换速度？我还没有尝试过任何东西，所以没有代码可以提供。我想知道我是否可以做一个例子。谢谢

HTML

<ul id="navigation">
<li class="link1"><a href="index.html"></a></li>
<li class="link2"><a href="services.html"></a></li>
<li class="link3"><a href="contact.html"></a></li>
</ul>

CSS

li.link1 {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;   
}

Answer 1

使用jQuery悬停

假设您有这样的HTML结构：

<div id="element" style="position:relative;">
   <img src="image1.gif" id="img1" />
   <img src="image2.gif" id="img2" style="display:none" />
</div>

和css：

img {
  position:absolute;
  top:0;
  left:0;
}

jQuery代码：

$("#element").hover(function() {
    //fadeout first image using jQuery fadeOut
    $("#img1").fadeOut(200);
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200);
}, function () {
    //fadeout second image using jQuery fadeOut
    $("#img1").fadeIn(200);
    //fadein first image using jQuery fadeIn
    $("#img2").fadeOut(200);
});

检查以下链接

http://api.jquery.com/hover/

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

这是演示的小提琴

这是一个使用css3和jQuery.hover作为ie回退的fiddle，正如hustlerinc 所提到的

Answer 2

是的。不过，您必须指定的第一件事是如何执行交换。

如果有两个层在彼此之上，并且您正在通过CSS转换它们的不透明度，那么您将设置转换（-webkit、-moz、-o等）不透明度1s；其中1s是指以秒为单位的数字。

如果您通过jquery或另一个javascript框架执行转换，那么您的动画函数将有一个以毫秒为单位的额外可用参数，如.animate（{properties xyz}，200）；

Answer 3

你可以用CSS3来完成，这是谷歌上的第一个结果：

http://www.w3schools.com/css3/css3_transitions.asp