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>

Improve this question
3
  • 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. Commented Feb 16, 2018 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! Commented Feb 16, 2018 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. Commented Feb 16, 2018 at 23:50

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Idk what the image width and height will be. Can you make this dynamic?
Why not left: 100% instead of right: <hardcodedValue>?
good idea! it is the end of the day for me, many minds are better than one :D
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?

Improve this answer

5 Comments

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?
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: 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
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.
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 on the pseudo-element.
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?
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; }
Improve this answer

2 Comments

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.
@minseong In CSS3, the syntax was changed from :after to ::after. See 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."