CSS div 悬停时的悬垂宽度

Question

所以我创建了一个 div，在其中添加了一个词，添加了一些样式，然后当我悬停它时我希望发生一些事情。但是，div 的 'hitbox' 如果您喜欢向右悬垂。

这是我的意思的一个例子：https://jsfiddle.net/n83y3rvw/2/

HTML

<body>
    <div id="word">
        WORD
    </div>
</body>

CSS

#word {
position: absolute;
top: 0px;
left: 80px;
font-size: 36px;
letter-spacing: 30px;
color: black;
font-weight: 400;
background-color: red;
/* width: 202px; */
}
#word:hover {
    background-color: blue;
}

执行代码时，可以清楚地看到div的宽度超出了div中的单词。

但是，即使我将 div 的宽度减小到 '202px' - 单词的宽度 - div 的 'hitbox' 仍然存在，你可以即使您没有将鼠标悬停在单词上，仍然会触发背景颜色变化。

我试过将单词包裹在段落标签的 div 元素内，然后说当鼠标悬停在段落标签上时背景颜色应该改变，但这没有用。 :(

我需要做哪些更改才能修改？

干杯！

Answer 1

"D" 之后的额外白色 space 是您的 letter-spacing: 30px 的结果；风格。如果你想要 space 在你的字母之间，你可以将它输入到你的 HTML 中，例如：

W&nbsp;O&nbsp;R&nbsp;D

W O R D

每个   是一个 space 所以你也可以

W&nbsp;&nbsp;&nbsp;O&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;D

W O R D

Answer 2

这里可以看到一个解决方案：jsfiddle.net/n83y3rvw/

它涉及将最后一个字母包装在它自己的 class 中并给它 letter-spacing: 0; 并将 white-space: nowrap; 应用到容器 div.

CSS div 悬停时的悬垂宽度

CSS div width overhang when hovered

html

css

hover