0

When I hover a .tags I'd like to show the image https://mal-stats.glitch.me/tagslegend.png next to it.

Test it out on this page.

I'd like to see this when not hovering .tags (all the cells in that final column have tags class):

enter image description here

and this while hovering the first .tags cell:

enter image description here

The image should align with the cell that is being hovered.

I know how I would do this with javascript. I also know how I could do this if I could change the html.

Because it's a user-stylesheet though I can only use CSS.

How do I do this in pure CSS?

I'm assuming I'd have to use pseudo-elements somehow, but I don't have enough experience to even know where to begin.

This is basically where I'm at:

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

but it doesn't work. I've seen examples that set display: block and then width and height, but the image from /tagslegend.png is dynamic. If that's a huge problem I can change that, but a solution that works with any widths and heights is best.

The code will need to run on this page, but b/c it's been requested in comments here's a minimal 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>
theonlygusti
  • 11,032
  • 11
  • 64
  • 119
  • 1
    It's best if you can create a working example by including enough code here to show the context, what you've tried, and what goes wrong. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – showdev Feb 16 '18 at 23:44
  • Live pages disappear, which makes a post less useful to future readers. It's helpful if you can make a small example here that shows the issue. It also helps provide people with some code that they can easily modify. I see you edited -- thanks! – showdev Feb 16 '18 at 23:48
  • @showdev yeah that makes sense. It's tricky for me b/c the actual html is so... messy? It's tricky to recreate here the environment I'm working in html-wise. I'm pretty sure I'd be able to re-work solutions to that snippet above though. – theonlygusti Feb 16 '18 at 23:50

3 Answers3

1

You almost have it, you should be able to do it like this:

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

You'll have to play with the width/height position-right to get it exactly how you want it.

Westwick
  • 2,367
  • 3
  • 28
  • 51
1

Since you're using a pseudo-element with a background image, you'll need to include content, give it some width/height, and set a display mode that allows setting width and height.

Here's an example:

.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>

For reference, see:
Why do the :before and :after pseudo-elements require a 'content' property?

showdev
  • 28,454
  • 37
  • 55
  • 73
  • Maybe it's set to `display:block`? Hard to say without seeing it in action. Oh I see the image is kindof wide. Maybe it doesn't fit? – showdev Feb 16 '18 at 23:59
  • just `position: absolute` seems to let it overlap its neighbour's. I've launched a new version, please can you [have a quick look at this](https://myanimelist.net/animelist/__g?): do you know why it doesn't move smoothly? When I run my mouse from one cell to the next it doesn't always switch – theonlygusti Feb 17 '18 at 00:01
  • Oh I think it's because the mouse is staying inside the pseudo element. I assume moving the pseudo element to the right will fix that. – theonlygusti Feb 17 '18 at 00:02
  • Yes, it looks like the element is large and covers up other `.tags` elements. Maybe set it to the exact size of the image. Could also try [disabling `pointer-elements`](https://stackoverflow.com/questions/5069110/remove-hover-css-behavior-from-element#answer-29783333) on the pseudo-element. – showdev Feb 17 '18 at 00:04
  • `pointer-events:none` is nice. Anyway I upvoted this and using your answer I found a solution that worked for me, which Michal somehow posted just after I found it. Since his answer's like word-for-word the code I wrote for myself I think I should accept his? – theonlygusti Feb 17 '18 at 00:07
0

Try this:

.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;
}
Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
  • Hahah no joke this is exactly what I just arrived at through my own experimentation xD Almost as soon as I was about to post an answer. – theonlygusti Feb 17 '18 at 00:04
  • 1
    @theonlygusti In CSS3, the syntax was changed from `:after` to `::after`. See https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Syntax "CSS3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :after, introduced in CSS2." – Michał Perłakowski Feb 17 '18 at 00:05