Does ie6 support hover?

Under normal circumstances, it is supported. What if your browser does not support hover? Then we will give you a solution to the problem that the browser does not support hover.

First we need to download csshover.htc

After downloading the compressed package file and decompressing it, we will get the file "csshover.htc". In order to avoid errors in the "csshover.htc" path when introducing css styles, we will Place this file in the same folder as the css file. The experiment here does not create a separate css file, there is only one "index.html" file, so put "csshover.htc" and "index.html" in the same folder.

In the same folder

Put it in the same folder

Introduce the file in the body style selector

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

body selector definition

Introduce the definition in the body selector into csshover.htc

This is done. The css style definition of this webpage is such as div:hover, li:hover, p :hover, custom named css selection name (.abc:hover), img:hover, and defined styles are all supported by IE6.

Special attention:

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

<style> 
body{behavior:url("csshover.htc");} /* 使用时候注意路径正确 */
</style>

Pay attention to the csshover.htc path.

ie6 supports hover case

We conduct three experimental examples respectively.

Description of experimental examples

The first example: assign hover (i.e. img:hover{...}) style to the img tag, and the picture will be larger when the mouse passes over it , the distance between the border and padding appears;

The second example: assign the hover (i.e. li:hover{...}) style to the li label, and the ul li label appears black when the mouse passes over it Border;

The third example: Name the css style you want and give it hover (i.e. .abc:hover{...}). When the mouse passes over the abc object DIV box, the text in the object changes to red.

The CSS code of these three small experimental examples is as follows:

body { behavior:url("csshover.htc"); }/* css注释：别忘记csshover.htc，使用时候注意路径 */ 
img{width:165px; height:60px; background:#090;}/* 原本图片宽度和高度背景颜色 */ 
img:hover{width:200px; height:200px; padding:3px; border:2px solid #00F; cursor:pointer} 
/* hover鼠标经过赋予让图片变宽 高，设置padding和2px蓝色边框、css cursor为鼠标指针样式  */ 
li:hover{ border:1px solid #000}/* li列表标签鼠标经过出现黑色边框 */ 
.abc:hover{ color:#F00}/* 对象.abc鼠标经过其内容css字体颜色变红色 */

The corresponding HTML source code of the three experiments:

<!-- html注释：1 鼠标经过图片变大 --> 
<img src="/static/imghwm/default1.png"  data-src="div -logo-2013.gif"  class="lazy"   alt="DIV LOGO" /> 
<!-- 2 鼠标经过li出现边框  --> 
<ul> 
<li>对li设置hover样式，鼠标经过加CSS边框</li> 
</ul> 
<!-- 3 鼠标经过abc盒子内文字变为红色  --> 
<div class="abc">对.abc:hover，鼠标经过时候文字颜色变红</div>

There are so many solutions for browsers that do not support hover. Friends who need it can save it, and please continue to pay attention to other updates of this site.

Related reading:

Sharing of graphic and text code for making html navigation bar

How to use CSS operation div's z-index

How to write the anchor text of html

The above is the detailed content of Does ie6 support hover?. For more information, please follow other related articles on the PHP Chinese website!