When using the mouse to move out of the event, there are generally two ways, one is the DOM event "onmouseover" and "onmouseout", there is a CSS pseudo-class ": hover".
How to choose in practice depends on the clear understanding of the difference between them.
The HTML DOM allows JavaScript to respond to HTML events.
When we bind an event to an element, a piece of JavaScript code can be executed when the event occurs.
For a total of mouse events, there are:
onMouseOver and onmouseout triggers a script when the mouse pointer moves to or from an element
OnMouseDown and onmouseup trigger scripts when mouse buttons are pressed or released
OnClick and Ondbclick trigger scripts when mouse clicks and double clicks
Onmousemover trigger script when mouse pointer moves
Mouse events are used in a very similar way, by assigning event attributes within the element tag, and then placing the JavaScript code that needs to be executed into the event-triggered function, which triggers the corresponding JavaScript code when we click on that element.
For example:
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<meta http-equiv= "Content-language" content= "Utf-8"/>6<script type= "Text/javascript" >7 functionOver (obj) {8obj.innerhtml = "Come in."; 9Obj.style.background = "Red";Ten } One functionout (obj) { Aobj.innerhtml = "Out of the way"; -Obj.style.background = "#666"; - } the</script> -<style type= "Text/css" > - #box { - width:400px; + border:2px solid; - margin:200px Auto; +line-height:100px; Atext-Align:center; at } - #img1, #img2 { - height:100px; - margin:2px; - background: #ccc; - } in -</style> to<title>opacity</title> + -<body> the<div id= "box" > *<div id= "IMG1" onmouseover= "over [this]" onmouseout= "out" > This is the content 1</div> $<div id= "Img2" > This is the content 2</div>Panax Notoginseng</div> -</body> the2 Identical blocks were created, each assigning the mouse pointer to the elements and the events onmouseover and onmouseout that moved out of the element.
When the mouse is not acting:
Move the mouse over content 1:
Mouse move out of content 1:
Now let's try the pseudo-class with CSS: hover to achieve this dynamic effect.
We add the following code to the CSS style:
1 #img2: hover {2 background: #666; 3 }
Then look at the effect:
Move the mouse over the content 2:
Move out:
So you can see the difference.
CSS is an abbreviation for cascading style sheets (cascading style Sheets) that can only change the style of an element, not dynamically changing the content of an element, because that's what the front-end script does.
Also, when you move the mouse over the element, the pseudo-class ": hover" and "onmouseover" can achieve the same effect to some extent, but when the element is removed, the pseudo-class ": hover" Content 2 is used to restore the pre-migration state, and the "onmouseover" is used Content 1 does maintain the JS changes to the element, and when the element is bound to more than one event, the element maintains the state of the last triggered event.
So in peacetime use, if only for the style display effect, you can use the CSS pseudo-class, if you need to change dynamically, then select the JS event.
"Javascript/css" about mouse events onmousexxx and CSS pseudo class hover
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
