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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

工具提示：

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

画廊：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

3 个答案: