Javascript 将鼠标悬停在上方时，将链接下的两行hr更改为一行

我正在制作一个网站，我已经在主徽标的顶部订购了链接作为菜单，目前我在菜单下面有两个hr标签，如下所示：

<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<hr align="left" width="100%" color="#a2a2a2">
<hr align="left" width="100%" color="#a2a2a2">

我想发生的是，当我把鼠标悬停在一个链接上，例如链接1，其中一条线从一个链接下消失，而在其他6个链接下

我肯定有办法做到这一点，但我对

HTML

和

CSS

相对较陌生

编辑

---

我要问的是，当我选择一个链接（如链接1）时，只有一个

标记，而不是两个，并在其他链接上保留两个
标记，主要思想是在链接上添加一个悬停事件，如：

$( "li a" ).hover(
  function() {
    //When hovering
  }, function() {
    //When loosing hover
  }
);

希望这有帮助


$（“LIA”）。悬停(
函数（）{
$（'hr:eq（0）'）.hide（）；
}，函数（）{
$（'hr:eq（0）'）.show（）；
}
);









您是说列表中的每个链接下都有2个
？
如果是这种情况，下面是一个关于如何使用jQuery在悬停链接下隐藏一个
的示例


var$links=$（'li>a'）；
$links.hover（函数（）{
$（this.parent（）.find（'hr:last'）.css（'opacity'，0）；
}，函数（）{
$（this.parent（）.find（'hr:last'）.css（'opacity'，1）；
});
hr{
过渡：不透明度；
}
李{
显示：内联块；
浮动：左；
}
李阿{
填充：0 10px；
}




























您可以这样做，使用伪元素


ul，li，a{
位置：相对位置；
显示：内联块；
保证金：0.5px 0；
}
保险商实验室{
空白：nowrap；
}
李{
填充：0 5px；
}
李：之后{
内容：''；
位置：绝对位置；
左：0；
宽度：100%；
高度：5px；
底部：-12px；
边框顶部：1px实心#A2A2；
边框底部：1px实心#A2A2；
}
李：悬停：之后{
边框顶部：0px实心#a2a2a2；
}









请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难说清楚你在问什么。我在页面顶部水平放置了所有7个链接，而不是在页面的一侧，因此它看起来像：
link1 link2 link3 etc
那么，我编辑了我的答案，它看起来更像你想做的吗？谢谢，但是我如何使所有的
hr
标记成为一条直线呢？使用
float:left
和一些
padding
（检查更新的代码片段）出于某种原因，这似乎不起作用？当我运行代码片段时，它可以工作，但当我把它放入代码中时，它就不能工作了？@JonSmith这一个取决于距离是精确测量的。如果您将
背景：白色
更改为
背景：红色
，您将看到它。我会在几分钟内用更好的答案更新我的答案。它只是不占用链接下的部分away@JonSmith添加了一个2:nd示例，一个更好的示例我已经在CSS中设置了
ul
标记，所以再次调用它会影响它吗？