如何在以下情况下悬停显示不同的工具提示图像，其中出现相同的工具提示图像

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>

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