CODEWITHSUNDEEP
javascripthtmlcss
Axel
Axel

Reputation: 5111

Make CSS Hover work when the element is hidden using javascript

I have a menu where there are the heading and the submenus. Whenever the user hovers over the heading, submenus show up.

And whenever any of the items in submenus is clicked, the submenu is set to hidden using Javascript. Now, when the user hovers over the menu, the submenus don't show up! Please help me to fix this.

function closesSan() {
  document.getElementsByClassName('submenu')[0].style.setProperty('display', 'none', 'important');
}
#main:hover .submenu {
  display: block!important;
}
<ul>
  <li id="main">
    <a href="javascript:void(0)">List</a>
    <ul class="submenu" style="display: none;">
      <li onclick="closesSan()">Bacon</li>
      <li onclick="closesSan()">Tuna</li>
      <li onclick="closesSan()">Chicken</li>
    </ul>
  </li>
</ul>

Upvotes: 0

Views: 139

Answers (4)

Ullas Hunka
Ullas Hunka

Reputation: 2211

I had to write some additional code to get the desired result. Actually, the base problem in your code was important and property {both works same} in sense both get prioritized by code.

So to get rid of I have added an additional class on click and removing that class on every new hover. Hope it will satisfy the needs. 

var main = document.getElementById("main");
main.onmouseover = function() {
  document.querySelector('.submenu').classList.remove("displayNoneImp");
}

function closesSan() {
  document.querySelector('.submenu').classList.add("displayNoneImp");
}
.submenu {
  display: none;
}

#main:hover .submenu {
  display: block;
}

.displayNoneImp {
  display: none !important;
}
<ul>
  <li id="main">
    <a href="javascript:void(0)">List</a>
    <ul class="submenu">
      <li onclick="closesSan()">Bacon</li>
      <li onclick="closesSan()">Tuna</li>
      <li onclick="closesSan()">Chicken</li>
    </ul>
  </li>
</ul>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272762

You can try something simple like this:

function closesSan() {
  document.getElementsByClassName('submenu')[0].classList.add("hide");
  setTimeout(function() {
      document.getElementsByClassName('submenu')[0].classList.remove("hide");
  },100)
}
#main .submenu {
  display: none;
}

#main:hover .submenu {
  display: block;
}
#main .submenu.hide {
  display: none;
}
<ul>
  <li id="main">
    <a href="javascript:void(0)">List</a>
    <ul class="submenu" >
      <li onclick="closesSan()" >Bacon</li>
      <li onclick="closesSan()">Tuna</li>
      <li onclick="closesSan()">Chicken</li>
    </ul>
  </li>
</ul>

Upvotes: 0

Rick
Rick

Reputation: 4126

Since you don't use a pure CSS implementation, use event listeners and avoid using !important whenever possible:

var main = document.querySelector('#main');
var submenu = document.querySelector('.submenu');
var items = document.querySelectorAll('#main li');

main.addEventListener('mouseover', function () {  
  submenu.style.display = 'block';
});

main.addEventListener('mouseout', function () {
  submenu.style.display = 'none';
});

items.forEach(function(item) {
  item.addEventListener('click', function () {
    console.log('clicked on:', item)
    submenu.style.display = 'none';
  });
});
.submenu {
  display: none;
}
<ul>
  <li id="main">
    <a href="javascript:void(0)">List</a>
    <ul class="submenu">
      <li>Bacon</li>
      <li>Tuna</li>
      <li>Chicken</li>
    </ul>
  </li>
</ul>

When Using !important is The Right Choice

Upvotes: 0

Mart
Mart

Reputation: 9

use visibility instead of display

visibility: hidden;

save those kittens

Upvotes: -1

Related Questions