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效果几乎适用于所有浏览器，包括古老版本的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实现起来更容易，更快。

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中的更改 - 转换属性已删除。

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

}

Answer 3

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

$（'。nav a'）。mouseover（function（）{

//在此处添加动画更改

}）。鼠标移开（函数（）{

//在此处添加默认行为

}）

Answer 4

试试这个

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

以下是DEMO，只需查看即可。

当鼠标悬停在动画上时，如何获得动画的导航链接？

4 个答案: