禁用：单击鼠标悬停

Question

I have a div that has hover:

.div {
  // css
}
.div:hover {
  // css
}

But I want to disable the hover when you click on the div .

Answer 1

Option 1. The Javascript solution

Simply add a class prohibiting the application of hover styling on click:

 $('div').on('click', function() { // when you click the div $(this).addClass('no-hover'); // add the class 'no-hover' }); 

 div { color: blue; } div:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>hover!</div> 

Option 2. The CSS solution

Alternatively, in pure CSS (although without rule persistence)

 div { color: blue; } div:not(:focus):hover { color: red; } div:focus { outline: none; } 

 <div tabindex="0">hover!</div> 

Answer 2

你需要的只是这个：

$('[your selector]').css({'pointer-events': 'none'})

Answer 3

Try like this:

$('#myid').on({
    mouseover: function(){
        $(this).css({background: '#F94'});
    },
     mouseleave: function(){
        $(this).css({background: '#DDD'});
    },
    click: function(){
        $(this).off('mouseleave');
    }
});

JSFIDDLE DEMO

Answer 4

Try this:

JQUERY

$(function() {                       //run when the DOM is ready
  $(".div").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  });
});

CSS

.div.active:hover {
cursor:default;
//same CSS as the DIV

}

Answer 5

.disabled {

  opacity: 0.5;
  pointer-events: none;

}

.disabled:hover *

  pointer-events: none;
  cursor: not-allowed;

}