html - CSS 自定义光标图像 - 溢出隐藏

Question

我有一个自定义光标图像，我在 Bootstrap anchor 按钮内使用了一个跨度。 我试图让溢出隐藏起来工作，所以当光标靠近按钮的边缘时，图像像附加的图片一样被截断。 我有一个 codepen我在这里工作。有人可以帮忙吗？

HTML:

    <a href="#" class="btn btn-primary btn-spotlight" id="happyButton">
      <span class="spotlight">EXPLORE</span>
    </a>

SCSS:

    #happyButton {
      margin-top: 20px;
      padding-left: 0;
      padding-right: 0;
      color: white;
      &:hover {
        overflow: hidden;
        white-space: nowrap;
      }
      & .spotlight {
        cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png") 5 12, auto;
        padding: 15px 30px;
      }
    }

Answer 1

游标不是页面的元素，因此不能那样操作。

我想说没有理智的方法来完成这个。