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

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已经在评论中请求了这个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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