当鼠标悬停在导航链接上时，如何将其设置为动画？

Question

我正在尝试让每个链接在用户悬停在它们上面时激活，最好的方法是什么？

我的代码是

    <ul class="nav">
    <li><a href="batting.html"class="nav">Batting</a></li>
    <li><a href="bowling.html"class="nav">Bowling</a><li>
    <a href="index.html"><img class="logo" src="images/logo.gif" width="125" height="125"></a> 
    <li><a href="fielding.html"class="nav">Fielding</a></li>
    <li><a href="game.html"class="nav">The Game</a></li>
    </ul>

谢谢。

Answer 1

是的，这可以使用纯HTML标记和CSS在任何元素上添加悬停动画。

.animated
{
  transition: prop;
  prop: value1;
}

.animated:hover
{
  prop: value2;
}

其中prop是您不希望被动画的CSS属性。这在大多数浏览器中都能很好地工作。此外，也可以使用脚本创建此行为。

有了标记，最好、最简单的无脚本动画解决方案是使用:hover和transition。这里有一个如何动画margin-left的小把戏：http://jsfiddle.net/9kpfW/

您可以使用数字度量为任何属性设置动画。(12px、12em、12%等)也可以添加带有非数字属性(即text-align)的悬停效果，但不能应用过渡。此外，还可以使用transition为同一元素上的多个属性设置动画。

因此，您可以完全使用CSS来创建非常丰富的效果。不需要JavaScript。:hover特效在几乎所有浏览器中都能很好地工作，包括旧版本的in。但是，如果您需要支持具有相同动画过渡效果的过时浏览器，则需要使用JavaScript，它在几乎所有浏览器中都受支持并启用。我推荐使用jQuery JavaScript库来简化您的脚本。

根据luckyamit的回答，这里有一个使用jQuery的相同margin-left动画的简单示例。这在几乎任何网络浏览器中都能很好地工作，包括古老的版本。

$(".nav li").hover(
 function()
 {
     $(this).find("a").stop().animate({"margin-left" : "40px"});
  },
 function()
 {
     $(this).find("a").stop().animate({"margin-left": "5px"});
 }
);

小提琴：http://jsfiddle.net/LxAva/1/

但是，如果你不需要在那些罕见的浏览器中提供相同的体验，我推荐纯CSS解决方案，因为它的原则是解耦标记、样式和逻辑。丰富的过渡效果更多地与样式相关，而不是逻辑，所以它们应该用CSS而不是JavaScript来解决。而且，在大多数情况下，CSS更容易和更快地实现。

Answer 2

这是一个FIDDLE

<ul class="nav">
  <li><a href="index.html"><img class="logo" src="images/logo.gif"/></a></li>
  <li><a href="batting.html">Batting</a></li>
  <li><a href="bowling.html">Bowling</a></li>
  <li><a href="fielding.html">Fielding</a></li>
  <li><a href="game.html">The Game</a></li>
</ul>


ul {
  list-style: none;
}
li {
  background: #555;
  float: left;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #333;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
li:hover {
  margin-top: -22px;
}
li a {
  display: block;
  height: 25px;
  width: 120px;
  color: #fff;
  letter-spacing: 1px;
  text-decoration: none;
  padding-top: 4px;
}

jQuery解决方案

$('li').hover(function() {
  $(this).stop().animate({ marginTop: '-22px' }, 450);
},function() {
  $(this).stop().animate({ marginTop: '0' }, 450);
});

已删除CSS - transition属性中的更改。

li {
  background: #555;
  float: left;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #333;
}
li:hover {

}

Answer 3

你可以使用jQuery来尝试下面的一个。

$('.nav a').mouseover(function(){

//在此处添加动画更改

}).mouseout(function(){

//此处添加默认行为

})