导航下的滑动条 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)
    }
);

我正在使用此代码在导航按钮下添加一个滑动条，但当鼠标悬停在上面时，它会影响具有相同 class 的每个按钮。

我也想知道是否有办法只用 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>

_{此外，我建议避免使用表格来创建菜单，而是使用带有元素的列表并将其样式设置为并排}

导航下的滑动条 jQuery CSS

Sliding Bar Under Navigation jQuery CSS

css

navigation

jquery

slide