通常はサポートされていますが、ブラウザがホバーをサポートしていない場合はどうすればよいですか?次に、ブラウザがホバーをサポートしていない問題の解決策を紹介します。
まず、csshoover.htcをダウンロードする必要があります
CSSを導入する際の「csshoover.htc」パスのエラーを避けるために、圧縮されたパッケージファイルをダウンロードして解凍した後、ファイル「csshoover.htc」を取得します。スタイルを作成するには、このファイルを CSS ファイルと同じフォルダーに置きます。ここでの実験ではCSSファイルを別途作成するのではなく、「index.html」ファイルは1つだけなので、「csshoover.htc」と「index.html」を同じフォルダに置きます。
同じフォルダー内
同じフォルダーに置きます
本文スタイルセレクターにファイルを導入します
本文スタイルセレクターで「body { behaviour:url("csshoover.htc"); }」と定義すると、スタイルコードの先頭に配置します。
ボディセレクターの定義
ボディセレクターの定義にcsshoover.htcを導入します
このWebページのCSSスタイル定義はdiv:hover、li:hover、p:hover、カスタム名などです。 CSS 選択名 (.abc :hover)、img:hover、および定義されたスタイルはすべて IE6 でサポートされています。
特別な注意:
これを成功させるには、次のコードを HTML に直接追加する必要があります (csshoover.htc ファイルを HTML ファイルに直接導入します):
<style> body{behavior:url("csshover.htc");} /* 使用时候注意路径正确 */ </style>
csshoover.htc パスに注意してください。
ie6はホバーケースをサポートします
それぞれ3つの実験例を実施します。
実験例の説明
最初の例: img タグ にホバー (つまり、img:hover{...}) スタイルを割り当てます。マウスがその上を通過すると、画像が大きくなり、画像間の距離が長くなります。境界線と padding が表示されます。
いいえ。 2 つの例: li タグに hover (つまり、li:hover{...}) スタイルを割り当て、マウスを押したときに ul li ラベルに黒い境界線が表示されます。
3 番目の例: マウスを押したときに、名前を付けたい CSS スタイルにホバー スタイルを割り当てます (つまり、li:hover{...})。この abc オブジェクトの DIV ボックスを通過すると、オブジェクト内のテキストが赤になります。
これら 3 つの小さな実験の例の CSS コードは次のとおりです:
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字体颜色变红色 */
3 つの実験の対応する HTML ソース コード:
<!-- 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>
ホバーをサポートしていないブラウザーには非常に多くの解決策があります。必要な友達はそれを保存できます。 . このサイトのその他のアップデートにも引き続きご注目ください。
関連読書:
以上がIE6はホバーをサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。