CSS で実装されたリンクを介してマウスで背景画像を切り替えるサンプル コード:
多くのナビゲーション バーには、マウスをスライドさせると背景画像が切り替わります。これは比較的優れた効果です。ナビゲーションバーは基本的に美化されました。
コード例は次のとおりです:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">ul li{ list-style:none; width:150px; height:30px; line-height:30px; text-align:center; float:left; margin-left:5px;}ul li a{ display:block; width:150px; height:30px; text-decoration:none; background:blue;}ul li a:hover{background:red}</style></head><body> <ul> <li><a href="#">蚂蚁部落一</a></li> <li><a href="#">蚂蚁部落二</a></li> <li><a href="#">蚂蚁部落三</a></li> <li><a href="#">蚂蚁部落四</a></li> </ul></body></html> 上記のコードでは、デモの便宜上、背景画像を背景色に置き換えています。実際のアプリケーションでは、背景色を背景色に置き換えるだけです。
原理は非常に単純で、主にリンク擬似クラスを使用します。詳細については、CSS擬似クラスセレクターE:hoverの章を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=9798
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
