如何使文本悬停区域不是一个完整的线？

Question

这是我的代码：

<a href="index.html"><p class="link">Link</p></a>

然后在CSS中：

p.link {color:black}
p.link:hover {color:aqua}

当我没有直接通过链接时，如何使链接无法被选中？因为当我将鼠标移动到左侧或右侧时它仍会改变颜色。换句话说，当文本停止时，如何使文本的悬停区域停止？而不是一整行？

我认为段落标记会阻止它，但它不起作用。

Answer 1

从逻辑上讲，您可以将<p>标记放在<a>标记周围，<p>定义整个文本块，而<a>通常定义选择文本。

你会结束这个

<p class="link"><a href="index.html">Link</a></p>

CSS：

a {color:black}
a:hover {color:aqua}

Answer 2

只需将<p>标记放在<a>标记周围，然后选择css中的a，而不是p。切勿将块元素放入内联元素中。 js fiddle