導航下的滑動條jQuery CSS

Question

$(".myNav").hover (
    function() { 
      $('.bar').animate({width: "102px"}, 500) 
      $(".myNav").animate ({backgroundColor: "#FF9900"}, 500) 
    }, 
    function(){ 
     $('.bar').animate({width: "-0"}, 500) 
      $(".myNav").animate ({backgroundColor: "#ffb84d"}, 500) 
    } 
); 

我使用此代碼在導航按鈕下添加滑動條，但是它在鼠標懸停時會影響同一類的每個按鈕。

我還想知道是否有一種方法可以純粹使用CSS？

http://jsfiddle.net/cgcLe1hs/

Answer 1

純CSS，你可以使用transition使動畫和:pseudo-elements重建了吧;試試這個：

.myTable { 
 
    border-collapse: collapse; 
 
    padding: 0px; 
 
} 
 
.myNav { 
 
    width: 100px; 
 
    text-align: center; 
 
    background-color: #ffb84d; 
 
    padding-bottom: 5px; 
 
    position: relative; 
 
    transition: background .5s linear; 
 
} 
 
.myNav:hover { 
 
    background: #FF9900; 
 
} 
 
.myNav:after { 
 
    content: ""; 
 
    height: 3px; 
 
    width: 0; 
 
    background: #000; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    transition: width .5s linear; 
 
} 
 
.myNav:hover:after { 
 
    width: 100%; 
 
}

<table class="myTable"> 
 
    <tr> 
 
    <td class="myNav"> 
 
     Home 
 
    </td> 
 
    <td class="myNav"> 
 
     About 
 
    </td> 
 
    </tr> 
 
</table>

---

_{除了我建議避免使用表格來創建一個元素和風格它的菜單instrad使用列表並排}