Question

当用户悬停.tags时，我希望网址https://i.stack.imgur.com/BTb0z.jpg（例如）中的图片浮动到用户鼠标指针的右侧。

如何在CSS中完全执行此操作？

我知道如何在JavaScript中执行此操作，但不知道CSS中是否可以使用它，更不用说从哪里开始了。

Answer 1

我认为只有CSS才能将图像附加到光标。但您可以将光标本身设为图像，请查看https://css-tricks.com/almanac/properties/c/cursor/以获取解释。但是对于光标图像，你可以这样做：

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

Answer 2

我有一点解决方案。我认为这样可行。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在纯CSS中，跟踪鼠标指针很棘手。

由于TazTheManiac指出您可以将光标设置为图像，但浏览器会限制图像的大小（通常为128x182像素）。

因此重新设计Harun的答案，将图像放在悬停元素旁边而不是光标旁边，作为纯CSS给出：

.tags { 
  position: relative;
}

.tags:hover:after {
  content: '';
  position: absolute;
  background-image: url(https://i.stack.imgur.com/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>

这对我有用。

在悬停上显示光标旁边的图像

3 个答案: