html - 悬停时在元素旁边显示图像？

Question

当我将鼠标悬停在 .tags 上时，我想显示图像 https://mal-stats.glitch.me/tagslegend.png旁边。

在 this page 上测试一下.

我希望在不悬停 .tags 时看到这个(最后一列中的所有单元格都有 tags 类):

当鼠标悬停在第一个 .tags 单元格时:

图像应与悬停的单元格对齐。

---

我知道如何使用 javascript 执行此操作。如果我可以更改 html，我也知道如何做到这一点。

因为它是一个用户样式表，虽然我只能使用 CSS。

---

如何在纯 CSS 中执行此操作？

我假设我必须以某种方式使用伪元素，但我没有足够的经验甚至不知道从哪里开始。

这基本上就是我所在的地方:

.tags:hover:after {
  background-image: url(https://mal-stats.glitch.me/tagslegend.png);
}

但它不起作用。我见过设置 display: block 然后是 width 和 height 的示例，但是来自 /tagslegend.png 的图像是动态的。如果这是一个大问题，我可以改变它，但适用于任何宽度和高度的解决方案是最好的。

---

代码需要在 this page 上运行, 但 b/c 它在评论中被要求这是一个最小的例子:

.tags:hover:after {
  background-image: url(https://mal-stats.glitch.me/tagslegend.png);
}

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td class="tags">Hover me</td>
  </tr>
</table>

Answer 1

你差不多搞定了，你应该可以这样做:

.tags { 
    position: relative;
}

.tags:hover:after {
    position: absolute;
    right: -200px;
    top: 0;
    width: 200px;
    height: 30px;
    background-image: url(https://mal-stats.glitch.me/tagslegend.png);
}

您必须调整 width/height position-right 才能获得您想要的效果。