CSS_html/css_WEB-ITnose でカスタムリンクヒントを実装する方法-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose でカスタムリンクヒントを実装する方法

WBOY

リリース： 2016-06-24 11:38:59

オリジナル

1037 人が閲覧しました

CSS でカスタムリンクプロンプトを実装する方法:

デフォルトの状態では、タグの 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