2

When the user hovers .tags I want the image at url https://i.sstatic.net/BTb0z.jpg (for example) to float to the right of the user's mouse pointer.

How can I do this purely in CSS?

I'd know how to do this in JavaScript, but don't even know if it's possible in CSS, let alone where to start.

Improve this question
3
  • 3
    You can't do this with pure CSS, as CSS does not provide any way to instruct the browser to have an element follow the cursor. There are very ugly hacks like this: codepen.io/AtomicNoggin/pen/yqwsG but I do not recommend using this in production. Commented Feb 16, 2018 at 22:09
  • We need some code. You can use entirely css, but I need to see what you have done. EDIT: You can't make it follow the cursor, but you can make it appear next to the link. Commented Feb 16, 2018 at 22:10
  • @Dai You may be right. Still I'm glad I asked the question, TazTheManiac came up with a clever solution that'll definitely work, and it looks like Harun's working on something that will solve my problem too. Commented Feb 16, 2018 at 22:35

3 Answers 3

Reset to default
3

I have a little solution. I think that will work.

.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
<p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <img src="https://secure.gravatar.com/avatar/655f4cf189cbb2349e5bad3314c4f3bc?s=114&d=mm&r=g" alt="" /> </span> </div>

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

2 Comments

I can't create new html. I have to only use the .tags element. Maybe you can try to re-create this with pseudo elements?
Sure, i'll give it a shot.
3

I don't think appending an image to the cursor can be done with only CSS. But you can have the cursor itself be an image, check out https://css-tricks.com/almanac/properties/c/cursor/ for a explanation. But for an image as cursor, you do this:

.class { cursor: url(images/my-cursor.png), auto; }
Improve this answer

3 Comments

Oh nice. I can fake having the image then, by making the image itself next to the cursor.
Some browsers block custom cursors entirely, or have browser-extensions that do as much.
This has some limitations for me b/c the image I want to float will probably be larger than the browser's maximum allowed cursor size.
1

In pure CSS it's tricky to track the mouse pointer.

As TazTheManiac points out you can set the cursor to an image, but browsers limit the size of the image (commonly 128x182px).

So re-working Harun's answer, which places the image next to the hovered element rather than next to the cursor, to be pure CSS gives:

.tags { position: relative; } .tags:hover:after { content: ''; position: absolute; background-image: url(https://i.sstatic.net/BTb0z.jpg); background-repeat: no-repeat; left: 100%; top: 0; width: 1000px; /* These are just large enough to definitely */ height: 1000px; /* contain the image. Image could be any size. */ }
<table> <tr> <td>No action</td> <td>No action</td> <td>No action</td> <td class="tags">Hover me!</td> </tr> <tr> <td>No action</td> <td>No action</td> <td>No action</td> <td class="tags">Hover me!</td> </tr> </table> <!--table borders--><style>td{border:1px solid #999;padding:10px;}table{border-collapse:collapse;}</style>

Which worked for me.

Improve this answer

1 Comment

Is there a way I can show my own element (i.e. button group) on mouse hover?