CSS Tutorial (8) A brief introduction to the use of CSS combined with JS

8. Briefly introduce the use of CSS combined with JS (for event actions)

Using CSS combined with javascript can create many cooler dynamic page effects. In this tutorial Finally, I will give you a brief introduction to the application of CSS and JS. First, we need to understand the concepts of events and actions. In client-side scripting, javascript obtains interaction with the user by responding to events. For example, when the user clicks a button or moves the mouse on a certain text, a click event or mouse movement event is triggered. By responding to these events, specific functions can be completed (for example, clicking a button to pop up a dialog box, the text changes color after the mouse moves over it, etc.). Several common events are introduced below (more events are used, please check the relevant information):

onClick: Mouse click event. (It occurs when the mouse is pressed and then released.)

onDblClick: Mouse double-click event. (Refers to the mouse being pressed quickly, released, and pressed again.)

onMouseDown: Mouse press event. (Occurs when the mouse is pressed.)

onMouseUp: Mouse release event. (Refers to the mouse from the pressed state to the bounced state.)

onMouseMove: Mouse move event. (Refers to moving the mouse on a specific element.) onMouseOver: Mouse over event. (It means that it occurs when the pointer moves from the outside world to the element.)

onMouseOut: The mouse leaves event. (Occurs when the mouse leaves a specific element.)

onLoad: Loading event. (Occurs when the image or page has finished loading.)

onUnload: Unload event. (Occurs when a visitor leaves the page.)

onScroll: Scroll bar scroll event. (Occurs when a visitor uses the scroll to move up or down.)

After we have the event, we add actions to the event. Here we only talk about the action of changing the custom style of the current element. We can use this method to set two custom CSS styles first. The object originally calls the first style, and when a mouse event occurs, the object is applied to the second CSS. Style, and the mouse effect produced, see the example below.

Insert an image into the web page, customize a ".out" style, and use the gray filter to make the image black and white:

Apply this custom style to the image. When previewing the image in the browser, it becomes black and white. We define another style ".over". This style has no content and is an empty style. The style sheet code is as follows:



Then add "onMouseOver="this.className='over'" onMouseOut="this.className='out'"" to the image tag (IMG), It means that when the mouse passes over, the picture is in the over style, that is, a normal color image; when the mouse leaves, the picture is in the out style, that is, a black and white image. oMouseOver and onMouseOut are mouse events. this.className="..." means that the class name of the current object is.... Be careful not to write the wrong case. JS is very sensitive to case.

In this way, the effect is completed. After saving, open it in the browser. The image is black and white. When the mouse moves up, the image becomes color. When the mouse leaves, the image changes back to black and white. As long as you use your imagination, you can also create many beautiful mouse effects through this.className method.

The above is the detailed content of CSS Tutorial (8) A brief introduction to the use of CSS combined with JS. For more information, please follow other related articles on the PHP Chinese website!