如何仅单击标题的文本而不单击右侧的空白？ [复制]答案

【问题标题】：How to click only on the text of a header and not the empty whitespace to the right? [duplicate]如何仅单击标题的文本而不单击右侧的空白？ [复制]
【发布时间】：2020-11-21 12:39:24
【问题描述】：

我正在尝试使标题上的链接只能在标题的文本上单击。问题是，在我的情况下，链接仍然是可点击的，即使没有文本（它仍然点击右侧的空白蓝色空间）。示例：

如您所见，整个蓝色都是可点击的，但我只想在“Hello World Link”字样之后结束点击。

有没有办法只允许点击文本“Hello World Link”而不是右侧的其余蓝色空白区域？

我的代码：

<a href="blah blaha ">
   <div class="headerText">
       <h2>@title</h2>
   </div>
</a>

CSS：

  .headerText{
       h2:hover {
         background-color: yellow;
    }
  }

【问题讨论】：

标签： javascript html css sass

【解决方案1】：

只需在您的.headerText DIV 上使用display: inline-block;

.headerText {
  display: inline-block;
}
.headerText h2:hover {
  background-color: yellow;
}

<a href="blah blaha ">
   <div class="headerText">
       <h2>@title</h2>
   </div>
</a>

SCSS：

.headerText{
  display: inline-block;

  h2:hover {
    background-color: yellow;
  }
}

【讨论】：

哦，我明白了，这有帮助。谢谢！

【解决方案2】：

仅将链接应用于文本，将a 元素移动到文本元素上方（此处为h2）。试试这个：

<div class="headerText">
  <a href="blah blaha ">
    <h2>@title</h2>
  </a>
</div>

还要检查h2 的样式。如果它具有比文本更宽的固定宽度，则可能会再次导致此问题。最好在问题中提供 HTML、CSS sn-p。

【讨论】：

我证明了上面的 CSS。基本上，我试图用黄色突出显示悬停时的标题文本。这是当前的 CSS，它以黄色突出显示整个宽度。如何将宽度设置为刚好适合文本的长度？
很难从提供的 CSS 中理解问题。您能否提供一个 HTML/CSS sn-p 来重现确切的场景？它位于堆栈溢出编辑器选项中。

【解决方案3】：

我不知道你的组件定义的样式是什么，但在某些情况下，你可以使用 css 空伪类，并将指针事件属性设置为无。这种方法只适用于元素没有任何子元素并且元素内容为空的情况。

a:empty {
  pointer-events:none;
}

【讨论】：

抱歉，我没看懂问题，刚刚看到图片。