Question

我创建了一个网页，其中包含三个图像，每个图像占据四列，当鼠标悬停在不同的图像上时，我希望在不同的图像上显示不同的文本。我很感激这方面的帮助。

我目前的HTML代码如下：

.col-4 {width: 33.33%; float:left;}
.col-4 img {
  width: 100%;
  max-width: 300px;
  height: 300px;
  display: inline-block;   
}

<div class= "container">
  <div class= "overPhotos">
    <div class= "row">
      <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
      </div>
      <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
      </div>
      <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
      </div>
    </div>
  </div>
</div>

Answer 1

您需要在要悬停的任何元素上添加GET /index.php?id=123 HTTP/1.1块。这是为您实现此目的的代码：

:hover

我向每个悬停元素添加了.col-4 { width: 33.33%; float: left; position: relative; } .col-4 img { width: 100%; max-width: 300px; height: 300px; display: block; } .col-4 .hover-text { display: none; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100; } .col-4:hover > .hover-text { display: block; } <div class="container"> <div class="overPhotos"> <div class="row"> <div class="col-4 "> <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image"> <span class="hover-text">Hello, World!</span> </div> <div class="col-4 "> <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image"> <span class="hover-text">Hello, World!</span> </div> <div class="col-4"> <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image"> <span class="hover-text">Hello, World!</span> </div> </div> </div> </div>，这需要为每个容器添加position: absolute;。

Fiddle here

Answer 2

执行此操作的基本方法是使用title属性：

<img src="" alt="" title="your text goes here">

或者更高级的东西：Link

Answer 3

尝试以下简单风格。

＆＃13;

.col-4 {width: 33.33%; float:left;position: relative;overflow: hidden;}
.col-4 img{
width: 100%;
max-width: 300px;
height: 150px;
display: inline-block;   
}

.col-4 .caption {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 1;
  padding: 4px;
  bottom: -100%;
  transition: bottom ease 0.4s;
}

.col-4:hover .caption {
  bottom: 0;
}

＆＃13;

<div class= "container">

<div class= "overPhotos">
    <div class= "row">
        <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
        <div class="caption">Image 1</div>
        </div>
        <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
        <div class="caption">Image 2</div>
        </div>
        <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
        <div class="caption">Image 3</div>
        </div>
    </div>
</div>
</div>

＆＃13;

Answer 4

＆＃13;

.col-4 {width: 30%; float:left; background: #000; margin: 10px; position: relative;}
.col-4 img{
width: 100%;
max-width: 300px;
height: 300px;
display: inline-block;   
}
.col-4 span {
    color: #fff;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display:none;
}
.col-4:hover span  {
display:block;
}

＆＃13;

	  <div class= "container">

<div class= "overPhotos">
    <div class= "row">
        <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
        <span>image caption</span>
        </div>
        <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
        <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
    </div>
</div>
</div>

＆＃13;

.col-4 {width: 30%; float:left; background: #000; margin: 10px; position: relative;}
.col-4 img{
width: 100%;
max-width: 300px;
height: 300px;
display: inline-block;   
}
.col-4 span {
    color: #fff;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

＆＃13;

	  <div class= "container">

<div class= "overPhotos">
    <div class= "row">
        <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
        <span>image caption</span>
        </div>
        <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
        <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
    </div>
</div>
</div>

＆＃13;

Answer 5

您只需在图片标记中添加title属性...

<img src="rick_sanchez.png" title="abc"  alt="Avatar" class="image">

Answer 6

更改图片上的替代文字。

<img src="summer_smith.png" alt="<your text here>" class="image">

Answer 7

这种CSS方法怎么样？

.col-4:nth-child(1):hover:after{position: absolute; content:"your text 1";}
.col-4:nth-child(2):hover:after{position: absolute; content:"your text 2";}
.col-4:nth-child(3):hover:after{position: absolute; content:"your text 3";}

检查这些可爱的小猫是否有工作演示：https://codepen.io/anon/pen/WZgQPE

PS。请按住Ctrl键点击该链接SO refuses to implement target='_blank'。

将鼠标悬停在图像上时的文字

7 个答案: