Создание простого раскрывающегося списка с помощью onmouseover

Question

Привет, я просто хочу, чтобы при наведении указателя мыши на элемент выпадала небольшая рамка, и я хочу, чтобы она go убиралась при наведении указателя мыши. Где я ошибаюсь?

Мой 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>

Однако вы спросили, где вы пошли не так, поэтому вот что действительно мешало ему работать:

• * Тег 1010 * был пуст, поэтому вы не могли его увидеть.
• Была пара пропущенных точек с запятой.
• Вместо === (используется при точном сравнении) используйте = присвоить что-либо свойству / переменной.
• Тернар не работал, потому что 'none' не мог определить, навели ли вы на него курсор; это просто строка none.

(Остальное, что было не нужно, я не буду упоминать, но я удалил его.)