CODEWITHSUNDEEP
javascriptjqueryhtmlcss
onkami
onkami

Reputation: 9441

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

I would like to make a menu effect such as on the example below, where HR tag is used to create sliding line effect under menu items.
But in the example under the link the "moving" hr is positioned using static settings (see the link for actual example):

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

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

I have a set of images that constitute my website menu, but these are positioned in floating way and I do not know their position at design time. I need therefore to modify code above in such a way that at least margin-left matches the position of the element (image) that has class two (the one that gets hovered) and, if possible, also match its width to the width of the element with class two. How I could possibly achieve that, do I manage with css or have to have a jQuery code?

Upvotes: 1

Views: 501

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

If you set the hr's position to absolute, you can set its left offset and width with jQuery:

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

I don't think you can do so in CSS alone without hard-coding the widths.

CodePen

Upvotes: 1

Related Questions