クリックするとポップアップ aaaa がリンクに移動します。
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td:hover { position: relative;}td:hover:before { content: attr(data-title); position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666;}</style></head><body><table><tr><td data-title="aaaa">1111</td><td data-title="bbbb">2222</td><td data-title="cccc">3333</td></tr></table></body></html>
aaaa にタグを追加します
aaaa にタグを追加します
onclick="location=..."
:after および :before 疑似要素は実際の dom 要素ではなく、いくつかの特定の効果を実装するだけであるため、イベントをバインドすることはできません
イベントをバインドするには、代わりに実際の dom 要素のみを使用できます
:after および :before 疑似要素は実際の dom 要素ではなく、いくつかの特定の効果を実装するだけであるため、イベントをバインドすることはできません
イベントをバインドするには、代わりに実際の dom 要素のみを使用できます
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td { position: relative;}td .tbox { position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666; text-decoration: none; display: none;}td:hover .tbox { display: block;}</style><script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body><table><tr><td data-title="aaaa" data-href="a.html">1111</td><td data-title="bbbb" data-href="b.html">2222</td><td data-title="cccc" data-href="c.html">3333</td></tr></table><script type="text/javascript">$(function(){ $("td").each(function(){ var t = $(this); var obj = $("<a>"); obj.addClass("tbox"); obj.text(t.data("title")); obj.attr("href",t.data("href")); t.append(obj) })});</script></body></html>
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">td { position: relative;}td .tbox { position: absolute; left: 5px; top: 100%; background: #330099; color: #99FFFF; border: 1px solid #00FF00; border-radius: 5px; box-shadow: 3px 3px 3px #666666; text-decoration: none; display: none;}td:hover .tbox { display: block;}</style><script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body><table><tr><td data-title="aaaa" data-href="a.html">1111</td><td data-title="bbbb" data-href="b.html">2222</td><td data-title="cccc" data-href="c.html">3333</td></tr></table><script type="text/javascript">$(function(){ $("td").each(function(){ var t = $(this); var obj = $("<a>"); obj.addClass("tbox"); obj.text(t.data("title")); obj.attr("href",t.data("href")); t.append(obj) })});</script></body></html>これはリマインダー、属性です。これを自分でカプセル化する必要があります。 div を使用してプロンプト ボックスをカプセル化します
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
