Question 15075 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery . Stop Hover after clicking value

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 class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div class="close">x</div>
    <a href="#">Value 1</a>
    <a href="#">Value 2</a>
    <a href="#">Value 3</a>
  </div>
</div>
Tags:

2

Answers


  1. 0

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

    enter image description here

    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')
    Login or Signup to reply.
  2. 0

    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();
   });
 });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search