悬停链接时，将Div水平移动到当前悬停的链接位置。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了悬停链接时，将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>以上是关于悬停链接时，将Div水平移动到当前悬停的链接位置。的主要内容，如果未能解决你的问题，请参考以下文章