如何将鼠标箭头变成可点击背景上的手指指针？ [复制]答案

【问题标题】：How to turn mouse arrow into finger pointer on clickable background? [duplicate]如何将鼠标箭头变成可点击背景上的手指指针？ [复制]
【发布时间】：2019-12-23 06:50:09
【问题描述】：

我的 WordPress 网站有一个可点击的两部分背景壁纸。它工作得很好，除了一件事：当鼠标悬停在背景上时，它仍然是一个箭头而不是手指指针，所以读者不知道它是可点击的。

我在脚本部分尝试了各种方法，但无济于事。当我让手指指针出现在背景上时，它也会出现在您碰巧悬停的页面上的其他任何地方，无论那里是否有超链接。

有谁知道如何让手指指针只出现在背景上？

<style>
body { 
background-image: url("/wp-content/uploads/2019/08/BottomBKG.png"), url("/wp-content/uploads/2019/08/TopBKG.png");
background-color: #000000;
background-repeat: no-repeat, no-repeat;
background-position: center bottom, center top;
background-size: 2000px 294px, 2000px 1368px;
background-attachment: fixed, scroll;
}
</style>

<script>
$('body').click(function(e){
var url = $(this).prop('href');
    if (e.target === this) {
      window.open('http://URLGOESHERE.com', '_blank');
    }
});
</script>

【问题讨论】：

您需要将 cursor 仍然为 body 的子元素设置为默认值，这样它们就不会从 body 继承 cursor 样式

标签： javascript jquery css wordpress

【解决方案1】：

您只需要在可点击元素上将 css cursor 设置为 pointer。

指针： 光标是指示链接的指针。通常是指向手的图像。

在您的情况下，我建议将您的背景图片移出<body>，因为在那里设置光标可能会对您页面的其余元素产生不良影响：

#background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: green;
  cursor: pointer;
}

#content {
  margin: 20px auto;
  background: #fff;
  height: 100px;
  width: 100px;
  text-align: center;
  position: relative;
}

<div id="background"></div>
<div id="content"><a href="#">Anchor</a></div>

【讨论】：

在 CSS 中，将相关元素的名称附加到 :hover。
@TRose - "cursor CSS 属性设置光标的类型，如果有的话，当鼠标指针悬停在元素上时显示。" - 即@987654328 @ 属性仅永远在您悬停时应用，因此不需要。
@billynoah body * {cursor:default } 效果不佳。我在div 中创建的超链接没有生成指针。但是，我尝试使用 div {cursor: default} 并成功了！感谢您让我走上正轨。
@JoeHudson - 正如我们都发现的那样，在正文上设置光标会导致其他元素出现问题。即使使用您提到的规则，锚链接也将不再具有应有的指针，您最终需要将正文中的所有内容重置为应具有的光标。在 sn-p 中玩了一会儿之后，我的建议是像我所做的那样重新构建一些东西——把你的背景图像放在一个没有子元素的绝对定位的 div 中，然后让其他所有东西都漂浮在它上面。这样你就可以得到你想要的光标样式而不影响其他一切。