画像にマウスオーバーするとテキストを表示
画像の左下隅にハイパーリンクを含む小さなボックスを表示しようとする場合マウスがその上に移動します。 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
