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

This article introduces the knowledge that "IE6 does not support how to solve the css style given by hover". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

For similar "p:hover", "img:hover", "li:hover", ".ABC: hover", "# header:hover"... IE6 does not support hover, over the mouse will not appear to give css style, the following we introduce the simplest compatible browsers specifically for IE6 support: hover solution.

First you need to set up a plug-in file (csshover.htc) for the body style so that ie6 can support hover expressions.

The steps to get IE6 to support hover are as follows:

1. Download csshover.htc and download immediately (1.755KB)

Download the compressed package file and extract it to get the file "csshover.htc". In order to avoid errors in introducing the "csshover.htc" path into the css style, put this file in the same folder as the css file. Here, instead of creating a new css file, there is only one "index.html" file, so here you put "csshover.htc" and "index.html" in the same folder.

Put it in the same folder

Second, import files in the body style selector

Defined in the body style selector, "body {behavior:url (" csshover.htc ");}" can be placed in front of the style code.

Csshover.htc is introduced into the definition in body selector

In this way, the web page css style definition such as div:hover, li:hover, p:hover, custom named css choice name (.abc: hover), img:hover, the definition of the style IE6 are supported.

Pay special attention to:

To succeed, you need to add the following code directly to the HTML (import the csshover.htc file directly into the HTML file):

Body {behavior:url ("csshover.htc");} / * pay attention to the correct path when using it * /

Note the csshover.htc path.

Third, ie6 supports hover cases.

We carried out three experimental examples respectively.

1. Description of experimental examples.

The first example: assign the hover (that is, img:hover {...}) style to the img tag. When the mouse passes over, the edge of the picture is large, and the border appears at a distance from the padding.

The second example: assign the hover (i.e. li:hover {...}) style to the li tag, and the ul li tag appears with a black border when the mouse is over.

The third example: give yourself a randomly named css style name to hover (i.e. .ABC: hover {...}). When the mouse passes over the abc object DIV box, the text inside the object turns red.

2. The CSS code of the three small experimental examples is as follows:

Body {behavior:url ("csshover.htc");} / * css Note: don't forget csshover.htc, pay attention to the path * / img {width:165px; height:60px; background:#090;} / * original picture width and height background color * / img:hover {width:200px; height:200px; padding:3px; border:2px solid # 00F Cursor:pointer} / * hover mouse endowed to make the picture wide and high, set padding and 2px blue border, css cursor as mouse pointer style * / li:hover {border:1px solid # 000} / * li list label Mouse appears black border * / .abc: hover {color:#F00} / * object. ABC mouse turns red through its content css font color * /

3. The third experiment corresponds to the HTML source code:

Set the hover style to li, add the CSS frame over the mouse to .ABC: hover, and the text color turns red when the mouse is over.

4. Screenshot of instance DW

This is the end of the content of "IE6 does not support how to solve the css style given by hover". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.