悬停时CSS div宽度悬垂答案

【问题标题】：CSS div width overhang when hovered悬停时CSS div宽度悬垂
【发布时间】：2015-12-08 21:41:24
【问题描述】：

所以我创建了一个 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 元素中将单词包裹在段落标签中，然后说当将鼠标悬停在段落标签上时背景颜色应该改变，但这不起作用。 :(

我需要进行哪些更改才能修改此内容？

干杯！

【问题讨论】：

你想让文本居中吗？您要寻找的最终结果是什么？
你希望 letter-spacing 属性做什么？
div:hover 仅在 div 内的文本悬停时触发。那么有没有办法摆脱 div 悬垂？
字母间距只是我想要的一些样式
我刚刚在小提琴上看到了你的例子，但我唯一看到的是当我悬停 div 时的颜色变化。所以我不太明白你在做什么。请善待并向我解释。

标签： html css hover

【解决方案1】：

可以在此处查看解决方案：jsfiddle.net/n83y3rvw/

它涉及将最后一个字母包装在自己的类中，并将其提供letter-spacing: 0; 并将white-space: nowrap; 应用于容器div。

【讨论】：

谢谢，我刚刚发布了这个并作为评论输入大声笑你只是复制我所说的作为答案大声笑吗？另外，我认为您的链接是错误的
不，是我自己的解决方案，但我的 js fiddle 链接不稳定，所以我暂时将其删除以更正它。很高兴你明白了。

【解决方案2】：

“D”之后的额外空白是您的字母间距的结果：30px；风格。如果你想在你的字母之间有空格，你可以把它输入到你的 HTML 中，比如：

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

W O R D

每个&nbsp; 是一个空格，所以你也可以这样做

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

W O R D

【讨论】：

感谢您的回复，但我正在寻找特定的字母间距，并且多次输入它有点乏味
在这种情况下，我会采用人们提供的其他解决方案，将最后一个字母包装在自己的 span 标签中。