1

I want make my 'id=submenu' "visibility:hidden" to "visibility:visible" When I mouseover 'class=recipe'. I tried inline,property Listener but It doesn't works. I know I'm very ignorant but I can't find What should I do. Can you help me to solve this problem? Here's my code. Sorry.

var t = document.getElementByClass('recipe');
t.addEventListener('mouseover', Function(sHover) {
  var a = document.getElementById('submenu');
  a.style.visibility = 'visible';
});
#submenu {
  visibility: hidden;
}
<div class="mainmenu">
  <a class="first" href="Home.html">Home</a>
  <a class="recipe" href="Recipe.html">Recipe</a>
  <a href="QNA.html">QNA</a>
  <div id="submenu">
    coffee
  </div>
</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Brian
  • 23
  • 3
  • You have a syntax error: `Function` should be `function`. – Barmar Jul 17 '20 at 16:18
  • Didn't you see the error message when you tried to run your code? – Barmar Jul 17 '20 at 16:19
  • I was so confused that I even forgot to check my error. Sorry for this. Thank you for your comment. I checked it and it solved. Thank you so much. :) – Brian Jul 17 '20 at 16:40

1 Answers1

0

Try this, you have to pull out the element from the array.

Also, it's not getElement.. but getElementsByClass

var t = document.getElementsByClass('recipe')[0];
t.addEventListener('mouseover', function(sHover) {
  var a = document.getElementById('submenu');
  a.style.visibility = 'visible';
});

You should consider using querySelector(".recipe") instead

EugenSunic
  • 13,162
  • 13
  • 64
  • 86