Creating a simple dropdown with 'onmouseover'

Question

Hi I just want a small box to drop down when I mouse over an element, and I want it go away when I mouse out. Where am I going wrong?

My 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' 
}

score 0 · Accepted Answer · answered Jun 19 '20 at 18:20

0

There were a couple of things in your code that I changed. This works, though:

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>

You asked where you went wrong, though, so here's the stuff that was actually preventing it from working:

The <a> tag was empty, so you couldn't see it.
There were a couple of missing semicolons.
Instead of === (used when comparing exactly), use = to assign something to a property/variable.
The ternary wasn't working, because 'none' couldn't tell whether you moused over it; it's just the string none.

(The rest of the stuff that wasn't needed I won't mention, however I did remove it.)

answered Jun 19 '20 at 18:20

KTibow

495
6
18

Thank you man! As you can tell I'm still very new to this. I know trying to build things is the best way to learn so that's what I'm doing! So from what I've gathered. Links always need some kind of content, and to assign with a Ternary use '=' instead of '===' because '===' is just comparing. Is that right? – Jamesyt60 Jun 19 '20 at 18:48
Well, links can exist with no content (you can "click" on them with JS), but they won't show. And yes, "=" is assignment, "==" is comparison, and "===" is tighter comparison. – KTibow Jun 19 '20 at 19:45
w3schools has some [good stuff for this](https://www.w3schools.com/Js/). – KTibow Jun 19 '20 at 19:46
Ok thank you KTibow. One last question. Let's say I have a few dropdown windows I want to make. I only want the one I'm mousing over to drop down, instead of all of them at the same time. How would i do this? – Jamesyt60 Jun 19 '20 at 21:55
Make a seperate ID and function for each one. If you have any more problems, it's okay to create a new question. – KTibow Jun 20 '20 at 01:17

Creating a simple dropdown with 'onmouseover'

1 Answers1