当鼠标悬停在导航链接上时，如何让导航链接进行动画处理

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

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

其中prop是你不想被动画化的 CSS 属性。这在大多数浏览器中都非常有效。此外，也可以使用脚本创建此行为。

使用标记，最好和最简单的无脚本动画解决方案是使用 :hover 和 transition .这是一个如何为margin-left制作动画的小提琴： http://jsfiddle.net/9kpfW/

您可以使用数值度量值对任何属性进行动画处理。（12像素、12 像素、12% 等）可以使用非数字属性（即 text-align ），但不能应用过渡。此外，还可以使用 transition 对同一元素上的多个属性进行动画处理。

因此，您可以纯粹使用CSS创建非常丰富的效果。不需要JavaScript。 :hover效果几乎适用于所有浏览器，包括古代版本的Internet Explorer。但是，如果您需要支持具有相同动画过渡效果的过时浏览器，则需要使用 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更容易，更快速地实现。

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

nav a'）.mouseover（function（）{

在此处添加动画更改

}）.mouseout（function（）{

在此处添加默认行为

}）

试试这个

//.HTML

<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>

//脚本

 $(".nav").hover(function(){
 $(this).stop().animate({"top" : "10px"});
  }, function(){
  $(this).stop().animate({"top": "0"});
  });

//.CSS

  .nav
{
    position: relative;
}

这是您的演示，只需检查一下。

这是一个小提琴

<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;
}

j查询解决方案

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

CSS 中的更改 - 删除了过渡属性。

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