ツールチップを使用せずに画像ホバーにテキストを表示するにはどうすればよいですか?

ツールヒントなしで画像ホバーにテキストを表示する

Web デザインでは、ユーザーが画像上にホバーしたときに追加情報を表示することが望ましいことがよくあります。ツールチップは一般的なソリューションですが、必ずしも望ましい外観や機能を提供するとは限りません。この記事では、純粋な CSS または jQuery を使用してこの効果を実現する方法について説明します。

CSS の使用:

CSS3 では、マウスホバー時のスタイル設定を可能にする :hover 擬似要素が導入されています。要素上。この場合、ホバー効果が画像に適用されます。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

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

この CSS は、テキスト キャプションを画像の左下隅に配置し、マウスが画像の上に置かれるまで非表示にします。

jQuery の使用:

jQuery を使用しても同じ効果を実現できます。この方法は、より複雑なシナリオに対してより柔軟性を提供する可能性があります。

HTML:

前と同じ。

CSS:

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

jQuery:

$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});

この jQuery スクリプトは、マウスオーバー イベントとマウスアウト イベントを画像要素にバインドし、キャプションの表示/非表示を切り替えます。

使用する方法に関係なく、CSS または jQuery を利用することで、ツールチップを使用せずに画像上に追加情報を表示するカスタム ホバー効果を作成できます。