How to remove the hover event in css

Methods to remove css hover events: 1. Through "$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })" method to bind the hover event; 2. Unbind the hover event through the "$('a').off('mouseenter').unbind('mouseleave');" method. Yes.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to remove the hover event of css ?

The correct way to cancel and bind hover events in jquery

In web design, we often use jquery to respond to mouse hover events, and The mouseover and mouseout events have the same effect, but how do you use on to bind the hover method? How do you use off to unbind the event?

1. How to bind the hover event

Look at the following code first. Suppose we bind a click and hover event to the a tag:

$(document).ready(function(){ $('a').on({ hover: function(e) {
 //Hover event handler
alert("hover"); },
click: function(e) { // Click event handler
alert("click"); } });
});

When the a tag is clicked, something strange happens. The bound hover event does not respond at all. The bound click event can respond normally.

But if you change the way of writing, for example:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

You should use mouseenter and mouseleave events instead, (this is also .hover( ) events used in the function)

So it can be quoted directly like this:

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler
alert("mouseover"); }, mouseleave: function(e) {
//Hover event handler
alert("mouseout"); }, click: function(e) {
// Clickevent handler
alert("click"); } });
});

Because .hover() is an event defined by jQuery itself, it is to facilitate users to bind and call mouseenter and It is just a mouseleave event. It is not a real event, so of course it cannot be called as an event parameter in .on().

2. How to cancel the hover event

As we all know, you can use The off function is used to cancel bound events, but it can only cancel events bound through bind. The hover event in jquery is quite special. If the event is bound in this way, it cannot be canceled.

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

The correct way to cancel the bound hover event:

$('a').off('mouseenter').unbind('mouseleave');

Recommended learning: "css video tutorial" "jQuery video tutorial"

The above is the detailed content of How to remove the hover event in css. For more information, please follow other related articles on the PHP Chinese website!