ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS_html/css_WEB-ITnose でカスタム リンク ヒントを実装する方法
CSS_html/css_WEB-ITnose でカスタム リンク ヒントを実装する方法
- WBOYオリジナル
- 2016-06-24 11:38:591038ブラウズ
CSS でカスタム リンク プロンプトを実装する方法:
デフォルトの状態では、3499910bf9dac5ae3c52d5ede7383485 タグの title 属性を使用してリンク プロンプト効果を実現できます。例:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><body><a href="http://www.51texiao.cn" title="蚂蚁部落">蚂蚁部落</a></body></html>
上記のコードはリンク プロンプト効果を実現できますが、多くの場合、実際のニーズを満たせない場合があります。より美しく、またはページに一致するリンク プロンプト効果をカスタマイズする必要がある場合があります。
コード例は次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">ul { list-style: none; font-size: 14px;}li { width: 100px; height: 30px; line-height: 30px; float: left; text-align: center; position: relative; border: 1px solid red;}span { display: none;}a:link, a:visited { text-decoration: none;}a:hover .tishi { display: block; width: 100px; height: 30px; background-color: #6C9; line-height: 30px; text-align: center; position: absolute; left: 80px; top: 40px; color: #FFFFFF;}</style></head><body><ul> <li> <a href="#" class="mylink">DIV+CSS<span class="tishi">DIV+CSS</span></a> </li> <li> <a href="#" class="mylink">jQuery<span class="tishi">jQuery</span></a> </li> <li> <a href="#" class="mylink">JS<span class="tishi">JS</span></a> </li> <li> <a href="#" class="mylink">HTML<span class="tishi">HTML</span></a> </li> <div style="clear:both"></div></ul></body></html> 上記のコードは、目的の効果を正常に実現します。最も重要な方法は、ハイパーリンク疑似クラスを使用してスパン要素を表示することです。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/943.html
最も元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod= viewthread&tid= 4689
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。