What is the difference between onmouseover and hover in CSS?

hover includes the process of moving the mouse onto the object and moving the mouse out of the object at the same time, and the corresponding subclass is also selected.

Mouseover means that when the mouse passes over an object, all subclasses that do not include it are selected at the same time.

The main difference is that event drivers are also added to the subclasses of hover elements. And mouseover only adds event driver to the current element.

And the hover event includes the mouseover event

mousemove(fn);

Bind a handler function to the mousemove event of each matching element.

hover(over, out);

A method that simulates hover events (the mouse moves over and out of an object). This is a custom method that provides a "keep in it" state for frequently used tasks.

When the mouse moves over a matching element, the specified first function will be triggered. When the mouse moves out of this element, the specified second function will be triggered. Moreover, it will be accompanied by detection of whether the mouse is still in a specific element (detection of subclasses). If so, it will continue to remain in the "hover" state without triggering the move-out event (mouseout).

$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); });

There is such a paragraph in the jquery source code:
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

That is to say hover! = mouseover+mouseout. But hover=mouseenter + mouseleave.

In the past, I only knew that pseudo-classes like hover, link, visited and active could only be applied to the a tag, that is, they should be written as a:hover, a:link, a:visited, a:active. In fact, these four things can be applied to other html tags and classes assigned to other definitions.

For information about CSS pseudo-classes, please refer to: http://www.w3school.com.cn/css/css_pseudo_classes.asp

a:link {color: #FF0000} /* Not visited Link*/

a:visited {color: #00FF00} /* Visited link*/

a:hover {color: #FF00FF} /* Move the mouse to the link* /

a:active {color: #0000FF} /* Selected link*/

The above is the detailed content of What is the difference between onmouseover and hover in CSS?. For more information, please follow other related articles on the PHP Chinese website!