为什么当鼠标悬停时，锚点中没有显示手型光标？

Question

我有这个标记，一个被包含在锚点标签中的标签，但是当你将鼠标悬停在上面时，光标不会变成手型光标：

<a href="#17">
  <label class="autor">
    <span class="by">
      by 
    </span>
    Erwin Lutzer
  </label>
</a>

我在这里做错了什么？

- kastulo

---

可能是重复问题：https://dev59.com/qnA75IYBdhLWcg3w0sl9 - David Starkey

当你点击它时，它是否有效？ - pattyd

我不同意那个“可能重复”的观点（请看我的回答）。 - Denys Séguret

Answer 1

标签会取消指针事件，因此请确保CSS中和都具有cursor: pointer;属性：

标签会取消指针事件，因此请确保CSS中和都具有cursor: pointer;属性：

a,
a label {
    cursor: pointer;
}

或者更好的做法是，移除标签！在锚点内部放置标签是无效的。

- Derek Henderson

Answer 2

虽然这不是实际问题的答案，但是这是我自己遇到的类似问题的解决方案：

当鼠标悬停在链接上时，手型光标没有显示。问题出在缺少 href 属性。

<a>Link</a>  <!-- regular cursor -->

但是

<a href="#">Link</a>  <!-- cursor pointer -->

- yurin

---

缺少href属性在HTML5中是有效的，并被视为链接占位符。然而，指针光标需要通过样式规则强制执行。 - eballeste

太棒了...谢谢 :) - Tejashree

Answer 3

在元素中加入label元素是没有必要的。label元素是用来装饰输入框的，它在链接中没有语义上的正确性。由于你没有指定一个指向输入框的for属性，所以没有理由将其显示为可激活元素。

参考文献

不要使用CSS添加鼠标指针，这会导致语义上的错误。将你的label替换为span元素。

- Denys Séguret

---

我使用锚点来包装标签，因为如果屏幕宽度为X像素，我将使用unwrap() jQuery函数来删除锚点标记。 - kastulo

@ kastulo我不明白您要解决什么问题，但那似乎不是正确的解决方案。 - Denys Séguret

@kastulo，你也可以使用CSS媒体查询来解决这个问题，并且只需使用CSS隐藏它（http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/）。这样它也可以在没有JS的情况下工作。 - Daniel

在这里使用媒体查询显然看起来是更合适的解决方案。 - Denys Séguret

不，不是这样的。只是因为我有一个很大的标记，我不想改变我的代码中所有的标记。但我想我会把标签改成spans，非常感谢！ - kastulo

Answer 4

在您的label上使用以下CSS代码：

CSS代码：

label.autor{
cursor:pointer;
}

- Carl0s1z

---

如果我这样做，只有span.by才会有光标，而不是整个内容。 - kastulo

使用新编辑后，将把 span.by 更改为 label.author。 - Carl0s1z

Answer 5

正如其他人所说，将标签放在锚标签内是无效的，但如果您真的想这样做，请添加以下CSS代码以解决您的问题：

a label { cursor: pointer; }

通常情况下，您使用标签来指向特定的输入字段，以便单击标签时，输入字段会获得焦点。由于您没有引用输入字段，因此在锚标记内部使用标签并不真正有用。

- Daniel