CODEWITHSUNDEEP
htmlcss
user3310334
user3310334

Reputation:

Show image next to cursor on hover

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.

Upvotes: 2

Views: 11808

Answers (3)

user3310334
user3310334

Reputation:

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.

Upvotes: 1

TazTheManiac
TazTheManiac

Reputation: 402

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

Upvotes: 3

Harun Diluka Heshan
Harun Diluka Heshan

Reputation: 1256

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>

Upvotes: 3

Related Questions