CODEWITHSUNDEEP
htmlcsstexthover
MinhazMurks
MinhazMurks

Reputation: 301

CSS Hover only on text?

If I have the following HTML with a custom CSS class: 

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}
<div class="custom_list_item">Test</div>

This makes it so when I hover over the entire box, it makes the text red. Is there a way to make sure this only happens when I hover over just the text itself?

Upvotes: 4

Views: 14374

Answers (5)

Farshid Rad
Farshid Rad

Reputation: 1

also you can write :hover with space after .custom_list_item as below:

.custom_list_item {
    color: black;
}

.custom_list_item :hover{
    color: red;
}
<div class="custom_list_item"><span>Test</span></div>

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18973

You can wrap a span for your div and set 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>

Upvotes: 1

j08691
j08691

Reputation: 207973

Change that div's display property from block to inline-block. No extra elements like spans necessary.

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

.custom_list_item:hover {
  color: red;
}
<div class="custom_list_item">Test</div>

Divs are block level elements by default and will take up the full width of their parent element.

Upvotes: 1

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

Wrap it in span then style span:

.custom_list_item {
  color: black;
}

.custom_list_item span:hover {
  color: red;
}
<div class="custom_list_item">
  <span>Test</span>
</div>

Upvotes: 3

TVBZ
TVBZ

Reputation: 594

Wrap it in a span. A p would stretch over the full width of div.

.custom_list_item {
    color: black;
}

.custom_list_item span:hover{
    color: red;
}
<div class="custom_list_item"><span>Test</span></div>

Upvotes: 9

Related Questions