當鼠標懸停在導航鏈接上時，如何獲得導航鏈接？

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，幾乎所有瀏覽器都支持並啟用了JavaScript。 我建議使用jQuery JavaScript庫來簡化腳本。

根據luckyamit的答案，這是使用jQuery的相同margin-left動畫的簡單示例。 這在幾乎所有的Web瀏覽器（包括舊版本）中都可以正常工作。

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

這是一塊

<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（）{

//在此處添加動畫更改

}）。mouseout（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>

//腳本

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

// CSS

  .nav
{
    position: relative;
}

這是給您的演示 ，只需檢查一下即可。