Shulou(Shulou.com)06/01 Report--

This article mainly shows you "do not use hover external CSS style how to achieve hover mouse hover change style", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "do not use hover external CSS style how to achieve hover mouse hover change style" this article.

You cannot use external CSS styles to change styles with hover mouse over.

In DIV+CSS page layouts, sometimes we cannot directly use external CSS styles to control DIV styles, such as setting a:hover styles for a.

You can use onMouseOver (move the mouse over the target) and onMouseOut (after the mouse moves away from the target) to style the a tag or other html tags.

You can use the tag directly, no matter A tag, SPAN tag, DIV tag, etc.

DIVCSS5

Above set the default style for a hyperlink code, move the mouse over the target, and style after the mouse moves away from the target. The characteristic code is relatively long.

DIVCSS5 important note: in order to see that the mouse is removed from the default style, you usually need to use style to set the default CSS style directly for the label and keep it the same as the onMouseOut setting CSS style. To avoid the difference between the initial state object style and the style after the mouse moves the object.

As in the above code:

Style= "color:#00F; text-decoration:none"

Vs.

OnMouseOut= "this.style.color='#00F';this.style.textDecoration='none'"

Set the default font color # 00F and do not display underscores.

An example of the hover styling method through regular hover and without external hover is as follows

1. Complete general external CSS case presentation code:

DIVCSS5 instance .abca {color:#00F; text-decoration:none} / * the font color of the hyperlink text in the default abc box is blue without underscore * / .ABC a:hover {color:#F00; text-decoration:underline} / * the font color appears red after the hyperlink text in the abc box is underlined * / .bb {color:#00F} .BB: hover {color:#F00 Font-weight:bold} / * set hover directly to the bb object box * / Welcome to the DIVCSS5 website! By default I am blue, red and bold when hovering over the mouse.

2. Screenshot illustration of HTML code and browser effect

Screenshot of the test effect of default and rollover browser

3. HTML source code after external CSS style conversion

Welcome to the DIVCSS5 website for DIVCSS5 instance! By default I am blue, red and bold when hovering over the mouse.

4. Use onMouseOver and onMouseOut to achieve external CSS hover style screenshots.

Using onMouseOver and onMouseOut to test the effect and description of external CSS hover-style browser screenshot

5. Online demo: view cases (using onMouseOver and onMouseOut converted instances)

6. Package and download (including external CSS and converted HTML files)

Download now (1.868KB)

7, special note: no matter a tag or div tag, span tag, H2 tag, p tag, etc., you can directly use onMouseOver and onMouseOut to hover over the object and change the style after moving away. It should be noted that in general, in order to keep the initial default state consistent with the style after the mouse is removed, you need to set the style attribute inside the tag to set CSS and onMouseOut (mouse away) to set the style CSS to save the same.

The above is all the content of this article entitled "how to change hover style without using hover external CSS style". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.