CSS：
.motionContainerMenu{
width: 100%;
height: 30px;
position: relative;
margin: auto;
margin-bottom: -7px;
border: 2px solid red
}
.motionTop{
position:absolute;
border:2px solid blue;
background-color: red;
height:10px;
width:100%
}
HTML：
<nav>
<ul>
<li>
<a href="transcript.php">Test one</a>
<div class="motionContainerMenu">
<div class="motionTop"></div>
</div>
</li>
<li>
<a href="contact.php">TestTwo</a>
<div id="motionContainerMenu">
<div class="motionTop"></div>
</div>
</li>
</ul>
</nav>
Javascript：
function focusMenu(x) {
x.style.borderColor = "#fff";
x.style.height = "30px";
x.style.backgroundColor = "#555"
}
var elements = document.querySelectorAll(".motionTop");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener( "mouseover", function() { focusMenu(x) } );
};
在代码的最后一行，我希望每个.motionTop都可以独立运行。我删除了focusMenu（x）并将其替换为Alert。我使用警报来测试代码，它完全按照我想要的方式工作。但是，我无法弄清楚如何使该行代码接受focusMenu函数。我是JavaScript新手（在这里发布之前，我做了很多研究）。感谢您的任何建议。
如果将event参数添加到mouseover事件监听器，则可以通过event.currentTarget以下方式获取相关元素：
elements[i].addEventListener( "mouseover", function( event ) {
focusMenu( event.currentTarget )
} );
我还建议使用classList而不是style直接更改属性，例如：
CSS：
.focused {
border-color: #FFF;
height: 30px;
background-color: #555;
}
JavaScript：
elements[i].addEventListener( "mouseover", function( event ) {
event.currentTarget.classList.add('focused');
} );
请注意，如果要.focused删除该类，mouseout则根本不需要JavaScript，只需使用CSS即可:hover：
.motionTop:hover {
border-color: #FFF;
height: 30px;
background-color: #555;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句