悬停链接时,将Div水平移动到当前悬停的链接位置。

我有一个有5个链接的菜单,每个链接都有相同的类和ID “navbarLink”,我还有另一个div(这是一个倾斜的形状)”#hoveredLink”,它从0移动到实际悬停链接的位置(在背景中),我希望这个形状占据悬停链接的整个宽度(因为它们的宽度不同,因为每个链接都有或多或少的文字)。所以我的目的是将这个 “#hoveredLink “水平移动,以达到 “navbarLink “实际悬停的位置。

还没有成功!

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

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

谁能告诉我,我在这里做错了什么?

谢谢!我有一个有5个链接的菜单,我想把它做成一个 “导航栏”。

解决方案:

它是这样的吗?如果它不是,把一个例子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>

给TA打赏
共{{data.count}}人
人已打赏
解决方案

变量的转移到查询Pentaho。

2022-4-22 15:02:52

解决方案

骆驼:从另一个途径调用一个途径,并同步得到响应。

2022-4-22 15:02:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索