How to realize the discoloration effect of mouse over by javascript

This article is to share with you about javascript how to achieve mouse hover discoloration effect, the editor feels very practical, so share with you to learn, I hope you can learn something after reading this article, do not say much, follow the editor to have a look.

Javascript to achieve mouse hover color change method: 1, the element binding onmouseover event, and set the event handler function; 2, in the event handler function, the use of "element object .style. Color attribute name =" color value ";" statement setting when the hover event is triggered, the element color changes the effect.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Idea: realize the discoloration of subordinate elements and child elements for superior elements and parent elements. Only need: hover and css selector to complete. Onmouseover and onmouseout events in JavaScript are now used for operations by subordinate elements to superiors.

The onmouseover event occurs when the mouse pointer moves over the specified element.

The onmouseout event occurs when the mouse pointer moves out of the specified object.

1. HTML code

When the mouse moves to A div, I want to change color 1 div 2 div

II. JavaScript code

   note: it is recommended to write it before the closing tag of body

Document.getElementById ("b") .onmouseover=function () {document.getElementById ("a") .style.backgroundColor = "green";} document.getElementById ("b") .onmouseout=function () {document.getElementById ("a") .style.backgroundColor = "red";}

3. CSS code

# A {height: 400px; width: 400px; background-color: red;} # B {height: 300px; width: 300px; background-color: green Display: none;} # A:hover # B {display: block;} # a {height: 300px; width: 300px; background-color: red } # b {margin-left: 50px; height: 300px; width: 300px; background-color: red;} # a:hover+#b {background-color: green }

4. Effect picture

What kind of language is javascript? javascript is a dynamically typed, weakly typed language, based on object and event-driven, relatively secure, and widely used in client-side web page development. it is also a widely used scripting language for client-side Web development. It is mainly used to add dynamic functions to HTML web pages, and now JavaScript can also be used in web servers, such as Node.js.

This is how javascript realizes the mouse hover discoloration effect. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.