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

问题描述

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

I've a set of three horizontal images. Now I've to show the tool-tip image for each of these images when user hovers his/her mouse cursor on any othe three images.

问题出在每个工具提示我想显示一个图像。我必须通过CSS实现这个东西。没有更多的jQuery和其他东西。

The issue is in every tool-tip I want to show an image. I've to achieve this thing through CSS only. No more jQuery and other stuff.

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

Can someone please help me in this regard please?

<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

Thanks in advance. You can take any images as tool-tip that are in .png format and having dimensions 273px * 224 px

推荐答案

您可以使用：或 ：before 伪类元素。

You can achieve that using :after or :before pseudo class elements.

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

这篇关于如何在使用CSS的鼠标悬停在另一个图像上的工具提示中显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！