悬停在图像上时显示文本

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

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

使用 CSS :hover 显示文本，这里与兄弟选择器 + 一起使用

通过为您的 CSS 规则使用一个类，例如 .showtext:hover + div，您的所有文本只需要一个类，与 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 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>

Answer 4

您只需要为该文本“div”提供一个 id 并将其更新为您的 CSS：

img + div {
  display: none;
}
img:hover + #ImageText {
  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>

          <img src="http://placehold.it/50" onmouseover="this.src='http://placehold.it/50/f00';" onmouseout="this.src='http://placehold.it/50';" />

          <div id="ImageText">Some text to be shown</div>
        </div>
        <!-- // .item -->
      </div>
      <!-- // .desktop-3 -->
      <div class="clear"></div>
    </a>
  </div>
</section>