CSS を使用してハイパーリンクの背景切り替えを実装する方法:
かなりの数の Web サイトがナビゲーション バーにこの効果を与えています。マウスをナビゲーション バー上に置くと背景画像が変わり、マウスを置くと背景画像が変わります。遠ざけると、元の背景が復元されます。この効果を実現する方法について簡単に紹介します。コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">div{ height:28px; width:300px; border-bottom:3px solid #E10001;}ul{ list-style:none; margin:0px; padding:0px;}ul li{ float:left; width:87px; height:28px; margin-left:2px; display:inline;}ul li a{ width:87px; height:28px; display:block; font-size:14px; text-align:center; line-height:28px; text-decoration:none; color:#333; background:url(mytest/demo/bg1.gif) no-repeat;}ul li a:hover{ background:url(mytest/demo/bg2.gif) no-repeat;}</style></head><body><div> <ul> <li><a href="#">CSS专区</a></li> <li><a href="#">JS专区</a></li> <li><a href="#">HTML专区</a></li> </ul></div></body></html>上記のコードは要件を実装しています。実装プロセスは非常に簡単です:
最初のステップは、ハイパーリンクのデフォルト状態に背景画像を設定することです。
2 番目の部分は、マウスをハイパーリンク上に置いたときに別の背景画像を設定することです。
注: a 要素はブロックレベルの要素に変換する必要があります。変換しないと、高さと幅を設定できません。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/938.html
最も元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod= viewthread&tid= 4683
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
