CSS仅在文本上悬停？

Question

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

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}

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

这样，当我将鼠标悬停在整个框上时，它会使文本变为红色。有没有办法确保仅当我将鼠标悬停在文本本身上时才会发生这种情况？

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>

Answer 2

先将其包装，然后再设置样式跨度：

.custom_list_item {
  color: black;
}

.custom_list_item span:hover {
  color: red;
}

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

Answer 3

将该div的display property从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>

默认情况下，div是块级元素，并且会占据其父元素的整个宽度。

Answer 4

您可以为div包装一个跨度并设置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>