CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。
デフォルトでは、<a> タグの title 属性を使用してリンクプロンプト効果を実現できます。例えば

コードをコピー

コードは次のとおりです。

上記のコードではリンクプロンプト効果を実現できますが、実際のニーズを満たすことができないことがよくあります。より美しく、またはページと一致するリンクプロンプト効果をカスタマイズする必要がある場合があります。コード例は次のとおりです。

コードをコピー

コードは次のとおりです。

コードを表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<ヘッド>
<title>アリ族</title>
<スタイルタイプ="text/css">
ウル
{
リストスタイル:なし;
フォントサイズ:14px;
}
李
{
幅:100ピクセル;
高さ:30px;
行の高さ:30px;
フロート:左;
テキスト配置:中央;
位置:相対;
border:1px 赤一色;
}
スパン
{
表示:なし;
}
a:リンク、a:訪問
{
テキスト装飾:なし;
}
a:hover .tishi
{
表示:ブロック;
幅:100ピクセル;
高さ:30px;
背景色:#6C9;
行の高さ:30px;
テキスト配置:中央;
位置:絶対;
左:80px;
上:40px;
色:#FFFFFF;
}
</スタイル>
</head>
<本文>
<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>
</本文>
</html>

上記のコードは、必要な効果を正常に達成します。主な方法は、ハイパーリンク疑似クラスを使用してスパン要素を表示することです。

<<: MySQL をベースにしたシンプルな検索エンジンを実装する

>>: HTML 順序なしリスト箇条書き画像を使用した CSS の記述