如何使用 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中文網其他相關文章！