如何使用 CSS 和 jQuery 在圖像滑鼠懸停時顯示文字？

滑鼠懸停在圖像上的文字

使用者在嘗試在滑鼠懸停時在圖像上顯示文字時經常遇到挑戰。傳統的工具提示技術可能並不總是符合所需的美觀或可訪問性要求。本文深入探討了基於 CSS 和 jQuery 的方法來實現流暢且高效的解決方案。

CSS 方法

利用 CSS3 中 :hover 偽元素的強大功能，我們無需任何 JavaScript 知識即可達到預期效果。 HTML 結構需要一個包含圖像和文字的包裝 div。 CSS 規則將文字元素定位在圖片下方，最初使用visibility:hidden 隱藏。將滑鼠懸停在圖像上 (class="hover") 時，文字變得可見 (visibility:visible)。

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;
}

對於那些精通jQuery的人來說，還有一種替代方法。在這種方法中，jQuery 控制滑鼠懸停和滑鼠離開時文字元素的可見性事件。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#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");
});

結論

兩者CSS 和jQuery 提供了在圖片解決滑鼠懸停時顯示文字的可行解決方案方案。方法的選擇取決於個人喜好和技術熟練度。透過利用這些技術，開發人員可以增強用戶體驗並創建美觀的互動。