Javascript 设置元素的左边距和宽度以匹配另一个元素的边距和大小

我想制作一个菜单效果，如下面的示例，其中HR标签用于在菜单项下创建滑动线效果。
但在链接下的示例中，“移动”hr使用静态设置定位（参见链接了解实际示例）：

---

我有一组图片组成了我的网站菜单，但这些图片是以浮动方式放置的，我在设计时不知道它们的位置。因此，我需要修改上面的代码，使左边距至少与类为2（悬停的元素）的元素（图像）的位置相匹配，并且如果可能，还将其宽度与类为2的元素的宽度相匹配。我怎么可能做到这一点，我是用css管理还是必须使用jQuery代码？

如果您将

hr

的位置设置为绝对，您可以使用jQuery设置其左偏移和宽度：

$('.container a').mouseover(function() {
  $('.container hr').css({
    left: $(this).offset().left,
    width: $(this).width()
  });
});

我认为，如果不对宽度进行硬编码，仅在CSS中是不可能做到这一点的

---

是否要求将

hr

元素

width

的宽度设置为与上述文本相同？“因此需要修改上面的代码，使左边距至少与元素（图像）的位置相匹配”No

img

元素出现在链接的codepen？@guest271314中codepen的LI元素中。对不起，我不清楚。如果第二个

li

宽度

是
200px
hr
宽度
应该是
200px
？
$('.container a').mouseover(function() {
  $('.container hr').css({
    left: $(this).offset().left,
    width: $(this).width()
  });
});