CODEWITHSUNDEEP
javascripthtml
Eu2019
Eu2019

Reputation: 81

On Hover Link move Div Horizontally to current hovered Link position

I have a menu with 5 links, Each individual link has the same class and ID "navbarLink" And I also have another div (which is a skewed shape) "#hoveredLink" that moves from 0 to the actual hovered link position (in the background) I want this shape to take the full width of the hovered link (since they're different on width since each one has more or less text). So My intention is to move this "#hoveredLink" horizontally to reach the position of the "navbarLink" actually hovered.

Haven't succeed yet!

window.onload = function() {
    var bsDiv = document.getElementById("hoveredLink");
    var x;

    $("navbarLink").hover(function() {
        x = document.getElementById("hoveredLink").left;
        bsDiv.style.left = x + "px";
    });
}

Can someone tell me what I'm doing wrong here?

Thanks!

Upvotes: 0

Views: 39

Answers (1)

Antonio Torres
Antonio Torres

Reputation: 342

It is this?
If it is not, put an example html.

var menu = document.getElementById("menu");
var up = document.getElementById("up");

  menu.onmouseover = function(e){
    if(e.target.nodeName != "SPAN"){ return; } // If everything is DIV, you can choose another condition to separate the children from the father.
    
    up.style.left = e.target.offsetLeft - 10 + "px";
    up.style.width = e.target.offsetWidth + 20 + "px";
  
  };
  
  menu.onmouseleave= function(e){ // Being the event in the parent is not lost between son and son
  
    up.style.width = 0 + "px";
    up.style.left = 0 + "px";
    
  };
.content{
  position: relative;
}
#up{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 3px;
  background-color: red;
transition: all 0.25s;
}
#menu > span{
  margin: 10px;
}
<div class="content">
  <div id="up"></div>
  <div id="menu">
    <span>Link 1</span>
    <span>Link_Link 2</span>
    <span>Link3</span>
    <span>Link 4...</span>
    <span>L5</span>
  </div>
</div>

Upvotes: 2

Related Questions