Detailed graphic explanation of the difference between mouse events CSS:hover and JS:mouseover

In order to make the page more attractive at work, front-end developers often add mouse movement in and out effects to the page. There are generally two methods for setting the mouse move in and out. One is to simply use the hover pseudo-class in CSS, and the other can use the DOM events in JS, namely onmouseover and onmouseout. Next, this article will talk to you about the difference between CSS pseudo-class hover and JS mouse event mouseover. I hope it can help you.

JS can react to HTML events. Mouse belongs to javascript. It can trigger js commands. When an element is bound to an event, when the event occurs, a piece of javascript code can be executed.

Mouse events in JavaScript include:
onmouseover and onmouseout: events are triggered when the mouse moves in and out
onmousedown and onmouseup: events are triggered when the mouse button is pressed or released
onclick and ondbclick: The event is triggered when the mouse clicks or double-clicks
onmousemover: The event is triggered when the mouse moves

CSS: hover is a pseudo-class selector in css, which refers to The process of moving the mouse in and out, this operation can change the style of the element, and its corresponding subclass is also changed. But the content of the element cannot be changed. For example, when the mouse passes to achieve the effect of a pop-up window, it is implemented using onmousemove. If hover is used, such an effect cannot be achieved.

Maybe the text description is not easy to understand. Next, let’s give an example to see the difference between hover, mouseover, and mouseout. It will be clear at a glance when combined with the picture.

Let’s take a look at the effect achieved by CSS:hover method

HTML part:

<div class="container">
     <div class="aa">内容1</div>
     <div class="bb">内容2</div>
</div>

CSS part:

.container {
           width: 200px;
           border: 1px solid #000000;
           margin: 200px auto;
           line-height: 100px;
           text-align: center;
          }
.aa,.bb {
          height: 100px;
          margin: 1px;
          background: #ccc;
         }
.aa:hover{background: pink;}

Effect Picture:

A large box contains two small divs. I want the background color to turn pink when the mouse passes over the upper div. The picture on the left is the effect when the mouse is not moved in, and the picture on the right is the effect when the mouse passes over. As you can see from the picture, CSS:hover can indeed achieve this effect.

Next, let’s take a look at how onmouseover and onmouseout are implemented in JavaScript. The CSS part of the code is the same, except that events are added to HTML and JavaScript is used.

HTML part:

<div class="container">
     <div class="aa" onmouseover="over(this)" onmouseout="out(this)">内容1</div>
     <div class="bb">内容2</div>
</div>

JavaScript part:

function over(obj){        
                obj.innerHTML = "鼠标移入";        
                obj.style.background = "pink";
            }
           function out(obj){
                obj.innerHTML = "移出了";
                obj.style.background = "#ccc";        
            }

Rendering:

## The picture on the left is the style when the mouse is not moved in. The same as above, the picture in the middle is the style when the mouse is passed. The background color of the above div becomes pink, and the content becomes "mouse in". The picture on the right is the effect after the mouse is moved out. The content inside the div has changed. By comparing the two examples, you should know the difference between hover, mouseover, and mouseout.

Summary: CSS can only change the style of the element, but cannot change the content of the element. If you want to change the content, you should use the JavaScript mouse events onmouseover and onmouseout. So just for the style effect, use the CSS pseudo-class hover. If you need to change it dynamically, choose the js event. What is specific at work depends on the situation and choose the appropriate method. Hope this tutorial is useful to you.

The above is the detailed content of Detailed graphic explanation of the difference between mouse events CSS:hover and JS:mouseover. For more information, please follow other related articles on the PHP Chinese website!