使用 'onmouseover' 创建一个简单的下拉菜单

Question

您好，当我将鼠标悬停在某个元素上时，我只想让一个小框下拉，当我将鼠标移开时，我希望它消失。我哪里错了？

我的HTML:

 <div onmouseover = 'mouseOverToggle()' onmouseout = '//function' id = 'new' class = 'child new'> New
     <div  id ='newDropDown' class="new dropdown"><a href=""></a></div> 
 </div>

Javascript:

var newDropdown = document.getElementById('new');
var dropDownContent = document.getElementById('newDropDown');

dropDownContent.style.display = 'none'

newDropdown.addEventListener('mouseover', mouseOverToggle);

function mouseOverToggle() {
   dropDownContent.style.display === 'none' ? 'show' : 'none' 
}

Answer 1

我更改了您代码中的一些内容。但是，这有效：

var dropDownContent = document.getElementById('newDropDown');
dropDownContent.style.display = 'none';
function mouseOverToggle() {
   dropDownContent.style.display = "";
}
function mouseOutToggle() {
   dropDownContent.style.display = "none";
}

 <div onmouseover='mouseOverToggle()' onmouseout='mouseOutToggle()' id='new' class='child new'>Mouse over this!
   <div id='newDropDown' class="new dropdown">
     <a href="#">First option</a>
   </div>
 </div>

不过，您问的是哪里出错了，所以这是实际上阻止它工作的东西：

<a> 标签是空的，所以你看不到它。
少了几个分号。
而不是 ===（在精确比较时使用），使用 = 将某些内容分配给 property/variable。
三元组不起作用，因为 'none' 无法判断您是否将鼠标悬停在它上面；它只是字符串 none.

（其他不需要的东西我就不说了，但是我确实删除了。）

使用 'onmouseover' 创建一个简单的下拉菜单

Creating a simple dropdown with 'onmouseover'

javascript

onmouseover

box

drop