ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使わずにマウスオーバースタイルを変更する方法

CSSを使わずにマウスオーバースタイルを変更する方法

php中世界最好的语言オリジナル: 2017-11-29 11:37:013023ブラウズ

Web ページのレイアウトでは、A に a:hover を設定するなど、外部 CSS スタイルを直接使用して DIV スタイルを制御できない特殊なケースがあることはわかっています。では、CSS スタイルを使用せずにマウスホバーを変更するにはどうすればよいでしょうか?ストップスタイルについては？

onMouseOver (マウスがターゲット上を移動する) と onMouseOut (マウスがターゲットから離れた後) を使用して、タグまたは他の html タグのホバースタイルを設定できます。

Aタグ、SPANタグ、DIVタグなど問わず、タグ上で直接使用できます。

b4744649d68efe06889f019e2adb3e36DIV5db79b134e9f6b82c0b36e0489ee08ed

上記は正しいですハイパーリンクの場合このコードは、デフォルトのスタイル、マウスがターゲット上に移動した後のスタイル、およびマウスがターゲットから離れた後のスタイルを設定します。フィーチャーコードは比較的長いです。

重要な注意: マウスを離した後に同じデフォルトのスタイルを表示するには、通常、ラベル上でスタイルを直接使用してデフォルトの CSS スタイルを設定し、それを onMouseOut 設定の CSS スタイルと同じに保つ必要があります。初期状態のオブジェクトのスタイルとマウスがオブジェクトから離れた後のスタイルの違いを避けるため。

上記コード:

style="color:#00F; text-decoration:none"  
与
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;"

デフォルトのフォントカラー #00F を設定し、下線を表示しません。

通常のホバーと外部ホバーなしでホバースタイルを設定する方法のケースは次のとおりです

完全な通常の外部 CSS ケースの表示コード:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>实例</title> 
<style> 
.abc a{ color:#00F; text-decoration:none} 
/* 默认abc盒子里超链接文字字体颜色为蓝色 没有下划线 */ 
 
.abc a:hover{ color:#F00; text-decoration:underline} 
/* 鼠标悬停abc盒子里超链接文字上后字体颜色为红色 出现下划线 */ 
 
.bb{ color:#00F} 
.bb:hover{ color:#F00; font-weight:bold} 
/* 直接对bb对象盒子设置hover */ 
</style> 
</head> 
<body> 
<div class="abc"> 
欢迎访问<a href="http://www.php.cn/">PHP</a>网站！ 
</div> 
 
<div class="bb"> 
默认我是蓝色，鼠标悬停时变红色并加粗。 
</div> 
</body> 
</html>

HTML コードとブラウザ効果のスクリーンショットの図

DIV CSS のデフォルトとマウスホバーブラウザテスト効果のスクリーンショット

デフォルトおよびマウスオーバーブラウザのテスト効果のスクリーンショット

外部 CSS スタイル変換後の HTML ソースコード

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIVCSS5实例</title> 
</head> 
<body> 
<div class="abc"> 
欢迎访问 
<a href="http://www.divcss5.com/"  
style="color:#00F; text-decoration:none"  
onMouseOver="this.style.color=&#39;#F00&#39;;this.style.textDecoration=&#39;underline&#39;"  
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;">DIVCSS5</a>网站！ 
</div> 
 
<div style="color:#00F; font-weight:normal" 
onMouseOver="this.style.color=&#39;#F00&#39;;this.style.fontWeight=&#39;bold&#39;" 
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.fontWeight=&#39;normal&#39;"> 
默认我是蓝色，鼠标悬停时变红色并加粗。 
</div> 
</body> 
</html>

これらの事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、他の関連するコンテンツに注目してください。 PHP 中国語 Web サイトの記事をご覧ください。

CSSを使わずにマウスオーバースタイルを変更する方法

関連記事