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

Setting margin-left and width of an element to match margin and size of another element

本文关键字：元素 另一个 左边 设置      更新时间：2023-09-26

我想制作一个菜单效果，比如下面的例子，其中HR标记用于在菜单项下创建滑动线效果
但在链接下的示例中，"移动"hr使用静态设置进行定位（实际示例请参见链接）：

http://codepen.io/rm/pen/ldhon

   .two:hover ~ hr {
     margin-left: 25%;
   }

我有一组图片组成了我的网站菜单，但这些图片是以浮动的方式定位的，我不知道它们在设计时的位置。因此，我需要修改上面的代码，使左边距至少与类为two的元素（图像）的位置匹配（悬停的元素），如果可能的话，还将其宽度与类为two

如果将hr的位置设置为绝对位置，则可以使用jQuery:设置其左偏移量和宽度

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

我认为如果不对宽度进行硬编码，你就无法在CSS中单独做到这一点。

CodePen

相关文章：