jquery - 将鼠标悬停在图像上时显示文本

Question

我想在将鼠标悬停在图像上时更改为另一张图像并显示文本。我已成功在悬停时更改为另一张图像，但我不知道如何显示文本。我还想自定义文本(颜色、大小、位置)。我的代码:

<section id="works">
		<div class="container">
			<div class="desktop-12 columns"><div class="border-top"></div></div>

			
				<a href="single-illustration-sidebar-left.html" class="permalink">
					<div class="desktop-3 mobile-half columns">
						<div class="item first-row">
							<h3>Bird</h3>
							<span class="category">Illustration</span>

							<img src="images/thumb_item01.png" onmouseover="this.src='images/thumb_item01a.png';" onmouseout="this.src='images/thumb_item01.png';"/>
						</div><!-- // .item -->
					</div><!-- // .desktop-3 -->
                  <div class="clear"></div>
				</a>
				</div></section>

谢谢。

Answer 1

在单个查询中使用 mouseenter 和 mouseleave。

我建议将特定的选择器类 .firstImage 应用于您的图像。

$('.firstImage').on({
  mouseenter: function (evt) {
    $(this).attr('src', 'http://placehold.it/350x350')
    $(this).parent('div').css('color', 'red');
  },
  mouseleave: function (evt) {
    $(this).attr('src', 'http://placehold.it/350x150')  
    $(this).parent('div').css('color', 'blue');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="works">
		<div class="container">
			<div class="desktop-12 columns"><div class="border-top"></div></div>

			
				<a href="single-illustration-sidebar-left.html" class="permalink">
					<div class="desktop-3 mobile-half columns">
						<div class="item first-row">
							<h3>Bird</h3>
							<span class="category">Illustration</span>

							<img src="http://placehold.it/350x150" class="firstImage"/>
						</div><!-- // .item -->
					</div><!-- // .desktop-3 -->
                  <div class="clear"></div>
				</a>
				</div></section>