Как я могу получить навигационные ссылки для анимации, когда на них наведена мышь?

Да, это можно добавить анимацию hover для любого элемента, используя чисто разметку 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 эффекты :hover хорошо работают почти в каждом браузере, включая древние версии Internet Explorer. Однако, если вам нужно поддерживать устаревшие браузеры с тем же анимированным эффектом перехода, вам нужно использовать JavaScript, который поддерживается и поддерживается почти в каждом браузере. Я рекомендую использовать jQuery JavaScript library для упрощения ваших сценариев.

Основываясь на ответе luckyamit, вот тривиальный пример той же margin-left анимации с использованием jQuery. Это хорошо работает практически в любом веб-браузере, включая древние версии.

$(".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/

Однако, если вам не нужно использовать один и тот же опыт в этих редких браузерах, я рекомендую решение pure-CSS из-за принципа развязки разметки, стиля и логики. Богатые эффекты перехода скорее связаны со стилем, чем с логикой, поэтому их нужно решать с помощью CSS вместо JavaScript. Кроме того, в большинстве случаев CSS проще и быстрее реализовать.

Вы можете попробовать сделать это с помощью jQuery.

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

//добавьте анимированные изменения здесь

}). MouseOut (функция() {

//добавьте поведение по умолчанию здесь

})

Здесь 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-перехода удалены.

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

}

просто попробуйте это

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

//SCRIPT

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

//CSS

  .nav
{
    position: relative;
}

Вот ДЕМО для вас, просто проверьте это.