Home >Web Front-end >HTML Tutorial >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="div -logo-2013.gif" 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:
The above is the detailed content of Does ie6 support hover?. For more information, please follow other related articles on the PHP Chinese website!