如何在仅使用 CSS 将鼠标悬停在另一个图像上的工具提示中显示图像？

Question

我有一组三个水平图像。现在，当用户将鼠标光标悬停在任何其他三个图像上时，我必须显示每个图像的工具提示图像。

问题在于我想显示图像的每个工具提示。我只能通过 CSS 来实现这件事。没有更多的 jQuery 和其他东西。

有人可以在这方面帮助我吗？

以下是三张水平图像的 HTML。

<table style="width:100%" id="thumbs">
                      <tr>
                        <td><span style="cursor:pointer" ><img id="img1" width="80" height="80" src="http://78.134.51.289/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/></span></td> 
                        <td><span style="cursor:pointer" ><img id="img2" width="80" height="80" src="http://78.134.51.289/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/></span> </td>
                        <td><span style="cursor:pointer" ><img id="img3" width="80" height="80" src="http://78.134.51.289/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
                      </tr>
                    </table>

提前致谢。您可以将任何.png 格式且尺寸为273px * 224 px 的图像作为工具提示

Answer 1

您可以使用:after 或:before 伪类元素来实现。

tr span {
    display: block;
    position: relative;
}
tr span:hover {
    z-index: 1;
}
tr td span:hover:after {
    content:"";
    background-image: url('http://lorempixel.com/273/274/animals');
    position: absolute;
    top:50%;
    left: 50%;
    width: 273px;
    height: 274px;
}
tr td + td span:hover:after {
    background-image: url('http://lorempixel.com/273/274/sports');
}
tr td + td + td span:hover:after {
    background-image: url('http://lorempixel.com/273/274/people');
}

Working Fiddle

Answer 2

您是要显示工具提示，还是将其用作图片库？无论哪种方式；

工具提示：

.image {
  display: inline-block;
  height: 150px;
  width: 200px;
  background: gray;
  position: relative;
  overflow:hidden;

}
.image img {
  height: 100%;
  width: 100%;
}
.image .tooltip {
  position: absolute;
  transform: translate(100%);
  bottom: 0;
  width: 100%;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.8s;
  opacity:0;
}
.image:hover .tooltip {
  position: absolute;
  transform: translate(0);
  opacity:1;
}
.tooltip:hover ~ .this{
  width:300px;
  }

<div class="image">
  <img src="http://placekitten.com/g/300/300" />
  <div class="tooltip">
    i'm a tool tip.
  </div>
</div>

画廊：

#gallery {
  width: 300px;
  border: 3px solid red;
  text-align: center;
  padding-top: 300px;
  background: url(http://placekitten.com/g/300/300) no-repeat;
  position: relative;
}
#gallery li {
  display: inline;
}
#gallery span img {
  padding: 0 1em;
  transition:all 0.8s;
}
#gallery img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
}
#gallery span:hover {
  background: red;
}
#gallery span:hover ~ img {
  display: inline-block;
}

<ul id="gallery">
  <li>
    <span>Cat 1</span>
    <img src="http://placekitten.com/g/200/200" />
  </li>
  <li>
    <span>Cat 2</span>
    <img src="http://placekitten.com/g/300/200" />
  </li>
  <li>
    <span>Cat 3</span>
    <img src="http://placekitten.com/g/110/100" />
  </li>
  <li>
    <span>Cat 4</span>
    <img src="http://placekitten.com/g/140/100" />
  </li>
</ul>

Answer 3

.ImgWithTool {
  position: relative;
  width: 200px;
  height: 200px;
}
.tool {
  display: none;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  text-align: center;
  background: #ddd;
}
.ImgWithTool:hover .tool {
  display: block;
}
.image-icon {
  width: 50px;
  height: 50px;
  background: #ccc;
  display: inline-block;
}
.image-icon:hover {
  background: #eee;
}

<td>
  <div class="ImgWithTool">
    <img id="img1" width="200px" height="200px" alt="your img" src="" />
    <div class="tool">
      <div class="image-icon">tool1</div>
      <div class="image-icon">tool2</div>
    </div>
  </div>
</td>