html - 在以下出现相同工具提示图像的情况下，如何在悬停时显示不同的工具提示图像？

Question

我有以下 HTML 代码:

<table style="width:100%" id="thumbs">
                      <tr>
                        <td><span style="cursor:pointer" ><img id="img1" width="80" height="80" src="http://78.674.67.234/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.674.67.234/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.674.67.234/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
                      </tr>
                    </table>

现在我想在悬停在每个图像上时显示不同的工具提示图像。为此，我按照 CSS 编写了它，但有了它，我只能在工具提示中显示一张图像，以显示我想要避免的所有三幅图像。

我该如何实现？

以下是 CSS 代码:

CSS 代码:

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

JSFiddle

Answer 1

我将进行以下更改:

<style>
tr div {
    display: block;
    position: relative;
}
tr div:hover {
    z-index: 1;
}
tr div:hover .bigger_image {
    display: block;
}
.bigger_image {
    display: none;
    position: absolute;
    top:50%;
    left: 50%;
    width: 273px;
    height: 274px;
}
.img1 {
    background-image: url('');
}
.img2 {
    background-image: url('');
}
.img3 {
    background-image: url('');
}
</style>

在 HTML 上:

<table style="width:100%" id="thumbs">
<tr>
    <td>
        <div style="cursor:pointer"><img class="img1" width="80" height="80" src=""/>
            <div class="img1 bigger_image"></div>
        </div>
    </td>
    <td>
        <div style="cursor:pointer"><img class="img2" width="80" height="80" src=""/>
            <div class="img2 bigger_image"></div>
        </div> 
    </td>
    <td>
        <div style="cursor:pointer"><img class="img3" width="80" height="80" src=""/>
            <div class="img3 bigger_image"></div>
        </div> 
    </td>
</tr>
</table>

如果您希望 thumbs 中的图像有所不同，只需更改或删除 thumbs div 中的类名即可。