Jquery . Stop Hover after clicking value-CodePudding

Please help me how to stop the hover effect. I want a Javascript or Jquery code to stop hover after clicking the values and the list of value will stay. And for the "x" button(close), it will close list of value and reset back to hover. Thanks in advance.

CSS:

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content .close{
  float:right;
  cursor: pointer;
}


.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

<div >
  <button >Dropdown</button>
  <div >
    <div >x</div>
    <a href="#">Value 1</a>
    <a href="#">Value 2</a>
    <a href="#">Value 3</a>
  </div>
</div>

CodePudding user response：

You can use the mouseover and mouseout events to simulate a hover.

So:

document.getElementById('dropbtn').addEventListener('mouseover', ()=>document.getElementById('dropdown-content').style.display = 'blobk')

document.getElementById('dropbtn').addEventListener('mouseout', ()=>document.getElementById('dropdown-content').style.display = 'none')

CodePudding user response：

You can remove all CSS hover and use jquery to open the dropdown on the click button and close it on click time

$(()=> {
    const dropOpen = $('.dropbtn');
    const dropClose = $('.dropdown-content .close');

    dropOpen.on('click', function() {
       $(this).next().fadeIn();
    });

    dropClose.on('click', function() {
       $(this).parent().fadeOut();
   });
 });