Question

我想要一个通用的解决方案，它总是将可点击的链接区域限制为我的h2文本的文本。请注意，问题是当您将鼠标悬停在文本右侧的空白处或单击该文本右侧的空间时，您仍然位于可点击区域。

以下是一个例子：

标记：

 <a  href="#p1">
     <h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
 </a>

的CSS：

h2.services {
    font-size: 16px;
}

这是一个演示： http://jsfiddle.net/j7n3k/

ps - 请不要js或jquery。只有在可能的情况下才能使用css和响应式解谢谢！

Answer 1

您应该将<a>标记放在 <h2>中。默认情况下，标题display设置为block，这意味着如果未明确设置宽度，它们将自动占用所有可用的水平空间。该链接包含标题，因此浏览器假定整个区域是一个链接。如果将<a>插入<h2>，则它仅包装文本而不包括整个标题。

<h2 class="page services"><a href="#p1">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></h2>

Answer 2

这将阻止它扩展：

 h2.services {
        font-size: 16px;
        display: inline-block;
    }

http://jsfiddle.net/vimes1984/j7n3k/4/

阅读display属性和position属性。显示 https://developer.mozilla.org/en-US/docs/Web/CSS/display

POSITION

https://developer.mozilla.org/en-US/docs/Web/CSS/position 风格：你可以用

.services{
/*this will style any element with a class of services*/
 }
.services a{
/*this will style any a inside of a element with a class of services*/ 
}

防止链接在整个页面中扩展

2 个答案: