Question

我有一个菜单，每个列表项在悬停时都会有不同的颜色边框。它有效，但感觉很笨重。我怎样才能优化这段代码，所以我不会重复这么多。

＆＃13;

$('ul>li:first-child>a').hover(function() {
  $(this).css('border-bottom', '0.2em solid blue');
}, function() {
  $(this).css('border-bottom', '0');
})

$('ul>li:nth-child(2)>a').hover(function() {
  $(this).css('border-bottom', '0.2em solid green');
}, function() {
  $(this).css('border-bottom', '0');
})

$('ul>li:last-child>a').hover(function() {
  $(this).css('border-bottom', '0.2em solid yellow');
}, function() {
  $(this).css('border-bottom', '0');
})

＆＃13;

ul li {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Yellow</a></li>
</ul>

＆＃13;

Answer 1

您可以使用CSS和HTML完全实现此目的。只需将类添加到列表元素并使用CSS样式进行定位。

HTML：

<ul>
  <li class="blue"><a href="#">Blue</a></li>
  <li class="green"><a href="#">Green</a></li>
  <li class="yellow"><a href="#">Yellow</a></li>
</ul>

CSS：

ul li {
  display: inline-block;
}
.blue a:hover{
    color:#0000ff;
}
.green a:hover {
    color:#00ff00;
}
.yellow a:hover {
    color:#ffff00;
}

在此处查看小提琴：https://jsfiddle.net/rnjr1aL9/

编辑：我有文字颜色的CSS，但你可以定位不同的东西，如border-color，font-size等。

jQuery可以优化自定义悬停代码

1 个答案: