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

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 已在 cmets 中请求，这是一个最小示例：

.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);
}

您必须使用宽度/高度位置来准确地获得您想要的结果。

Answer 2

由于您使用的是带有背景图像的伪元素，因此您需要包含 content，给它一些宽度/高度，并设置一个允许设置宽度和高度的 display mode。

这是一个例子：

.tags:hover:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url(//via.placeholder.com/10x10);
}

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

参考见：
Why do the :before and :after pseudo-elements require a 'content' property?

Answer 3

试试这个：

.tags { 
  position: relative;
}

.tags:hover::after {
  content: '';
  position: absolute;
  left: calc(100% + 30px);
  top: 0;
  width: 1000px;
  height: 1000px;
  background-image: url(https://mal-stats.glitch.me/tagslegend.png);
  background-repeat: no-repeat;
}