Html 将鼠标悬停在页面上

我的CSS有一个问题，我可以点击锚元素而不直接超过它，而是与它保持一致

我把我的锚标签放在一个像这样的小隔间里

<div class="footer">
    <a id="foo" href="foo" target="_blank">
        <p id="foo">foo</p>
    </a>
</div>

---

你的标签颠倒了。把你的

---

另外，消除

标记中的id引用。它将从

标记继承id。
我认为问题在于锚链接中段落标记的使用。在内联元素中使用块级元素不是一个好的做法。我已经更新了这一段，使之能够跨越这一段，现在对你来说很好

<div class="footer"><!-- block element-->
    <a id="foo" href="foo" target="_blank"><!--inline element-->
        <span id="foo">foo</span><!--inline element-->
    </a>
</div>

HTML文件中不能有两个ID。
只需像这样删除
：

<div class="footer">
    <a id="foo" href="foo" target="_blank">foo</a>
</div>

标记是块级标记。它们将水平填充其父容器。如果出于某种原因需要使用
，请在css中将其更改为：

footer {
  text-align: center;
}
.foo {
  display: inline-block;
}

但是，您最好将
换成
。跨距不是块级别的，因此您可以在不需要对浏览器默认行为进行必要替代的情况下对其进行更多操作。
问题到底出在哪里？除非将文本本身悬停，否则您不想单击它吗？是的，我只想单击，除非我在文本上方。我怀疑您的元素跨越了页面的整个宽度。尝试使用响应性测量设置宽度。
<div class="footer">
    <a id="foo" href="foo" target="_blank">foo</a>
</div>

#foo {  
    color:rgb(170,170,170);  
    width: 100%;  
    margin: auto;  
}

footer {
  text-align: center;
}
.foo {
  display: inline-block;
}