Whenever I hover over a .tags element, I want to display the image next to it.
Feel free to test this feature on this specific page.
This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the tags class):
https://i.stack.imgur.com/JcU6V.png
And this is what I expect to see when hovering over the first .tags cell:
https://i.stack.imgur.com/1KrEh.png
The image should align perfectly with the cell that is being hovered over.
I am familiar with how to implement this using javascript. I also understand how I could do it if I had the ability to modify the html code directly.
However, due to the limitations of a user-stylesheet, I can only utilize CSS for this task.
How can I achieve this using purely CSS?
I assume I will need to incorporate pseudo-elements somehow, but my lack of experience leaves me unsure where to start.
This is the approach I have taken so far:
.tags:hover:after {
background-image: url(https://mal-stats.glitch.me/tagslegend.png);
}
However, this method does not work as intended. I have encountered examples that involve setting display: block along with specifying width and height, but the size of the image from /tagslegend.png dynamically changes. If this creates a significant issue, I am willing to adjust it, although a solution that adapts to varying widths and heights would be preferred.
The code must be functional on this particular page. For those who requested it in comments, here is a simplified example:
.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>