我如何能实现的功能，一个事件侦听

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新手（在发布之前，我做了大量的研究）。谢谢你的任何建议。

来源

2017-07-10 Mel

什么'x'传递给'focusMenu'？它没有定义，也许你想'event.currentTarget' – Cohars

'x'导致focusMenu（）方法不被执行。尝试将代码放入jsfiddle.net并在那里运行。你会马上看到错误。删除它并在focusMenu（）代码中添加一个'debugger;'关键字将显示侦听器将工作。 – Clomp

好的，谢谢你看我的代码。 – Mel

如果添加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'); 
});

请注意，如果你想在mouseout要删除的.focused类，那么你并不需要JavaScript的所有，只是使用CSS :hover：

.motionTop:hover { 
    border-color: #FFF; 
    height: 30px; 
    background-color: #555; 
}

来源

2017-07-10 21:23:13 Dai

谢谢你的建议！ – Mel

另外，我知道我可以使用CSS，但我想了解更多关于JavaScript的内容） – Mel

我如何能实现的功能，一个事件侦听

回答

相关问题