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上的类名称。

如何在出现相同工具提示图像的以下场景中显示不同的工具提示图像？

1 个答案: