CSS悬停仅在文本上？答案

【问题标题】：CSS Hover only on text?CSS悬停仅在文本上？
【发布时间】：2019-03-18 16:10:42
【问题描述】：

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

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}

&lt;div class="custom_list_item"&gt;Test&lt;/div&gt;

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

【问题讨论】：

您可以将文本包裹在段落元素中并添加您的样式。你清楚吗？
如下@08691所说，这是一个简单的展示概念。默认情况下，div 具有显示块，因此 div 可以获得完整的可用空间。如果你想要那个 .custom_list_item。仅获取内容宽度，只需修改默认情况下赋予 DIV 的块显示 display: inline-block;只是： .custom_list_item {display: inline-block;颜色：黑色; }
@AlbertoFortes 不，实际上这不是我想要完成的。由于这旨在用作列表项，因此如果我将显示设置为 inline-block 如果有另一个元素具有更宽的内容块，它仍然会悬停在整个框上。跨度完美。

【解决方案1】：

将其包装在 span 中。 p 将延伸到 div 的整个宽度。

.custom_list_item {
    color: black;
}

.custom_list_item span:hover{
    color: red;
}

&lt;div class="custom_list_item"&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

将其包装在 span 然后样式 span：

.custom_list_item {
  color: black;
}

.custom_list_item span:hover {
  color: red;
}

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

【讨论】：

【解决方案3】：

将 div 的 display property 从 block 更改为 inline-block。不需要像跨度这样的额外元素。

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

.custom_list_item:hover {
  color: red;
}

&lt;div class="custom_list_item"&gt;Test&lt;/div&gt;

默认情况下，Div 是块级元素，将占据其父元素的整个宽度。

【讨论】：

【解决方案4】：

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

.custom_list_item {
    color: black;
}

span:hover{
    color: red;
}

div{
border: 3px solid red;
}

&lt;div class="custom_list_item"&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/div&gt;

【讨论】：