CSS仅对文本进行Hover效果？

Question

如果我有以下带有自定义CSS类的HTML代码：

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}

<div class="custom_list_item">Test</div>

这样做会导致我将鼠标悬停在整个框上时，文本变为红色。有没有办法只在我将鼠标悬停在文本上时才发生这种情况？

- MinhazMurks

---

你可以将文本放入一个段落元素中，并添加样式。这对你来说清楚吗？ - Alessio

正如@08691在下面所说，这是一个简单的显示概念。默认情况下，div具有display block属性，因此该div会占用所有可用空间。 如果您希望.custom_list_item仅获取内容宽度，则只需通过将DIV的默认块显示修改为display: inline-block;即可实现。 只需：.custom_list_item {display: inline-block; color: black; } - Alberto Fortes

@AlbertoFortes 不，实际上这不是我想要实现的。由于这是作为列表项使用的，如果我将显示设置为inline-block，如果有另一个具有更宽内容块的元素，则仍会在整个盒子上悬停。 span 完美地解决了这个问题。 - MinhazMurks

Answer 1

将其包裹在 span 中。一个 p 会伸展到 div 的整个宽度。

.custom_list_item {
    color: black;
}

.custom_list_item span:hover{
    color: red;
}

<div class="custom_list_item"><span>Test</span></div>

- TVBZ

---

是的，谢谢，这很完美。我之前使用了一个p，但意识到它并没有帮助我的情况。 - MinhazMurks

Answer 2

将其包装在中，然后对进行样式设置：

.custom_list_item {
  color: black;
}

.custom_list_item span:hover {
  color: red;
}

<div class="custom_list_item">
  <span>Test</span>
</div>

- Evik Ghazarian

---

如果你将 p 改为 span，你就有一个可行的解决方案 ;) - Mark Baijens

好的，这是一个更好的想法。根据您的建议和声誉更新了我的答案 :) 谢谢。 - Evik Ghazarian

Answer 3

将该 div 的 display 属性 从 block 改为 inline-block。无需额外的元素，如 span。

.custom_list_item {
  color: black;
  display:inline-block;
}

.custom_list_item:hover {
  color: red;
}

<div class="custom_list_item">Test</div>

元素默认为块级元素，会占据其父元素的全部宽度。

- j08691

Answer 4

你可以为你的 div 包裹一个 span 并设置 span:hover。

.custom_list_item {
    color: black;
}

span:hover{
    color: red;
}

div{
border: 3px solid red;
}

<div class="custom_list_item"><span>Test</span></div>

- Hien Nguyen