JavaScriptを使わずに画像にマウスオーバーしたときにテキストを表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScriptを使わずに画像にマウスオーバーしたときにテキストを表示するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-06 22:56:03

オリジナル

996 人が閲覧しました

How to Display Text on Mouseover of an Image Without JavaScript?

画像にマウスオーバーするとテキストを表示

画像の左下隅にハイパーリンクを含む小さなボックスを表示しようとする場合マウスがその上に移動します。 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 サイトの他の関連記事を参照してください。