悬停在图像上时显示文本

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

使用CSS :hover显示文本，此处与同级选择器+一起使用

通过为您的CSS规则使用一个类，您只需要为所有文本使用一个类，而不是id，它需要对每个文本是唯一的。

根据评论更新

为了让文本位于图像的顶部，我在它们周围添加了一个包装器，并为文本提供了一个位置

.imgwrapper {
  position: relative;
}
.showtext + div {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
  font-size: 24px;
  width: 250px;
}
.showtext:hover + div {
  display: block;
}

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

          <div class="imgwrapper">
            <img class="showtext" src="http://placehold.it/250" onmouseover="this.src='http://placehold.it/250/0ff';" onmouseout="this.src='http://placehold.it/250';" />

            <div>Some text to be shown on top of the image</div>
          </div>

        </div>
        <!-- // .item -->
      </div>
      <!-- // .desktop-3 -->
      <div class="clear"></div>
    </a>
  </div>
</section>

​

Answer 2

在单个查询中使用mousenter和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>

​

Answer 3

试试这个：

​

$(document).ready(function() {
    
    $(".myimg").mouseenter(function(){
        $(this).attr({src:"http://kurld.com/images/wallpapers/flower-image/flower-image-18.jpg"});
        $(".txt").show();
        
    }).mouseleave(function(){
        $(this).attr({src:"https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg"});
        $(".txt").hide();
        
    })
})

 img {
   width: 200px;
   height: 100px;
   }
.txt {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: #fff;
  }
.wrapper {
  position: relative;
  }

 <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>
                            <div class="wrapper">
							<img class="myimg" src="https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg" />
                            <div class="txt">Red Flower</div>
                            </div>
						</div><!-- // .item -->
					</div><!-- // .desktop-3 -->
                  <div class="clear"></div>
				</a>
				</div></section>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

​