Maison > interface Web > tutoriel HTML > IE6 prend-il en charge le survol ?

IE6 prend-il en charge le survol ?

php中世界最好的语言
Libérer: 2017-11-22 10:34:49
original
2345 Les gens l'ont consulté

Normalement, il est pris en charge. Que faire si votre navigateur ne prend pas en charge le survol ? Ensuite, nous vous donnerons une solution au problème selon lequel le navigateur ne prend pas en charge le survol.

Nous devons d'abord télécharger csshover.htc

Téléchargez le fichier du package compressé et décompressez-le pour obtenir le fichier "csshover.htc". "Erreur de chemin lors de l'introduction des styles CSS, placez ce fichier dans le même dossier que le fichier CSS. L'expérience ici ne crée pas de fichier CSS séparé, il n'y a qu'un seul fichier "index.html", alors placez "csshover.htc" et "index.html" dans le même dossier.

Dans le même dossier

Mettez-le dans le même dossier

Introduisez le fichier dans le sélecteur de style de corps

Défini dans le sélecteur de style de corps" body {behavior:url("csshover.htc"); }", qui peut être placé au début du code de style.

Définition du sélecteur de corps

La définition dans le sélecteur de corps est importée dans csshover.htc

Ça y est La définition de style CSS de cette page Web est telle que div : hover, li:hover, p :hover, le nom de sélection CSS nommé personnalisé (.abc:hover), img:hover et les styles définis sont tous pris en charge par IE6.

Attention particulière :

Pour réussir, vous devez ajouter le code suivant directement dans le HTML (introduire directement le fichier csshover.htc dans le fichier HTML) :

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


Faites attention au chemin csshover.htc.

ie6 prend en charge le cas de survol

Nous effectuons respectivement trois exemples expérimentaux.

Description de l'exemple expérimental

Le premier exemple : attribuez le style de survol (c'est-à-dire img:hover{...}) à la balise img, afin que l'image soit plus grande lorsque la souris passe dessus, la distance entre la bordure et le padding apparaît

Le deuxième exemple : attribuez le style hover (c'est-à-dire li:hover{...}) au style ; li, et l'étiquette ul li apparaît en noir lorsque la souris passe dessus. Bordure

Le troisième exemple : nommez le style CSS que vous souhaitez et survolez-le (c'est-à-dire .abc:hover{...}) Lorsque la souris passe sur la zone DIV de l'objet abc, le texte de l'objet devient rouge.

Le code CSS de ces trois petits exemples d'expériences est le suivant :

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字体颜色变红色 */
Copier après la connexion

Le code source HTML correspondant des trois expériences :

<!-- 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>
Copier après la connexion

La solution est si le navigateur ne prend pas en charge le survol. Il y en a tellement, les amis dans le besoin peuvent les enregistrer, et continuez à prêter attention aux autres mises à jour de ce site.

Lecture connexe :

Partage de code d'image et de texte pour la production de barres de navigation HTML


Comment l'utiliser Opération CSS div's z-index


Comment écrire le texte d'ancrage du HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal