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”之后的额外空格是你的字母间距的结果：30px;样式。如果您想在字母之间留出空格，可以在HTML中输入：

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

W 0 - [R d

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

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

W 0 - [R d

Answer 2

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

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

悬停时CSS div宽度悬垂

2 个答案: