リンクテキストを変更するマウスオーバーのCSS実装例 code_html/css

リンクテキストを変更するマウスオーバーのCSS実装例 code_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:22

オリジナル

1201 人が閲覧しました

CSS を使用してマウスがスライドしたときにリンクテキストを変更するサンプルコード:
マウスがスライドしたときに、リンク内のテキストを変更する必要がある場合があります。これは、JS を使用すると簡単に実現できます。もちろん、CSS を使用するのは難しくありません。以下にこのようなコード例を紹介します。必要な方の参考になれば幸いです。
コードは次のとおりです。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#Menu{  width:500px;  margin:50px auto;  border:1px solid #CCC;  overflow:hidden;}#Menu ul{  margin:0;  padding:0;  list-style:none;}#Menu li{  width:100px;  height:22px;  line-height:22px;  float:left;  overflow:hidden;  text-align:center;}#Menu a{  width:100px;  float:left;  overflow:hidden;}#Menu span{  display:block;  margin-top:-22px;}#Menu a:hover{padding-top:22px;}</style></head><body><ul id="Menu">  <li><a href="#"><span>HOME</span>首页</a></li>  <li><a href="#"><span>NEWS</span>新闻</a></li>  <li><a href="#"><span>ABOUT</span>关于</a></li>  <li><a href="#"><span>CONTACT</span>联系</a></li>  <li><a href="#"><span>照片</span>PHOTO</a></li></ul></body></html>

ログイン後にコピー

上記のコードは、リンク上にマウスを置くとテキストを切り替えることができます。以下は実装原理の簡単な紹介です。
1. 実装原理:
英語のテキストが表示されない理由は、span 要素の margin-top 値が正確に li 要素の高さに設定されているためです。 , 英語のテキストが非表示になるように、リンク上にマウスを置くと、リンクのpadding-top属性値が22pxに設定され、span要素が表示されるようになります。
2. 関連資料:
1. オーバーフロー属性については、CSS オーバーフロー属性の章を参照してください。
2.a:hover は、CSS 疑似クラスセレクター E:hover の章を参照できます。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=9629

詳細については、以下を参照してください: http://www.softwhy.com/divcss/