CSSとjQueryを使用して画像ホバーにテキストを表示する方法?

画像ホバー上にテキストを表示する

ユーザーが画像上にホバーしたときに表示される小さなボックスの作成は、さまざまな方法で実現できます。目的の効果を実現するための包括的なガイドは次のとおりです。

CSS3 :hover 擬似要素の使用

CSS3 で :hover 擬似要素を利用すると、ボックスを表示できます。画像ホバー。このメソッドの HTML および CSS コードは次のとおりです。

<div>

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}

jQuery

または、jQuery を使用して同じ結果を得ることができます。 HTML、CSS、および 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");
});

この jQuery コードは、マウスが画像上にあるときに「テキスト」要素を表示し、マウスが離れると非表示にします。

ボックスのカスタマイズ

ボックスのサイズと位置をカスタマイズするには、bottom: プロパティと left: プロパティで提供される CSS 値を調整できます。画像への境界線の接続を削除するには、CSS に以下を追加します:

#wrapper img {
  border: none;
}

複数の画像とキャプション

複数の画像とキャプションがある場合は、画像ごとにラッパー div を作成し、その中に画像要素とテキスト要素を含めることができます。コード スニペットに示されている形式をコピーし、それに応じて画像ソースとテキストを置き換えるだけです。

以上がCSSとjQueryを使用して画像ホバーにテキストを表示する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。