CSS наведите курсор только на текст?

Question

Если у меня есть следующий HTML-код с пользовательским классом CSS:

.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

Оберните это в span тогда стиль span:

.custom_list_item {
  color: black;
}

.custom_list_item span:hover {
  color: red;
}

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

Answer 3

Вы можете обернуть диапазон для вашего div и установить диапазон: hover

.custom_list_item {
    color: black;
}

span:hover{
    color: red;
}

div{
border: 3px solid red;
}

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

Answer 4

Измените свойство отображения этого div с block на inline-block. Нет необходимости в дополнительных элементах, таких как пролеты.

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

.custom_list_item:hover {
  color: red;
}

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

Div являются элементами уровня блока по умолчанию и занимают всю ширину родительского элемента.