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 hover

假设您有这样的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/

Here is a fiddle用于演示

Here is a fiddle使用css3和jQuery.hover作为后备，如hustlerinc所述

Answer 2

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

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

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

Answer 3

你可以使用CSS3，这是Google上的第一个结果：

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

有没有办法在鼠标上设置转换速度？

3 个答案: