ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使わずに画像にマウスオーバーしたときにテキストを表示するにはどうすればよいですか?
JavaScriptを使わずに画像にマウスオーバーしたときにテキストを表示するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-06 22:56:03876ブラウズ
画像にマウスオーバーするとテキストを表示
画像の左下隅にハイパーリンクを含む小さなボックスを表示しようとする場合マウスがその上に移動します。 JavaScript を使用せずにこれを実現するために、2 つの CSS ソリューションを紹介します:
CSS3 ソリューション:
CSS3 :hover 疑似要素の使用:
<div>
#wrapper .text {
position: relative;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
} jQuery ソリューション:
<div>
#wrapper p {
position: relative;
bottom: 30px;
left: 0px;
visibility: hidden;
}$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});HTML ヘッドに jQuery ライブラリを忘れずに含めてください:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>以上がJavaScriptを使わずに画像にマウスオーバーしたときにテキストを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。