CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 15

Change color of single li on hover

I am struggling to change the font color of that particular li when hover over. My code is not working properly when mouse is pointed to li from white to black color.

.tags-list li{display:inline-block;background-color:#253b5d;    padding: 1px 10px !important;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 14px;   
    transition: all 1s linear;
    }
.tags-list li:hover{background-color: #aebdd5;}
.tags-list li a{transition: all 1s linear;color:white;}
.tags-list ul li a:hover{color:black;}
<ul class="tags-list">
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>

Upvotes: 0

Views: 712

Answers (4)

Joschua Schneider
Joschua Schneider

Reputation: 4093

Seems like you added the ul element after your class selector that already is the ul element.

Compare these two lines you wrote:

.tags-list li a{transition: all 1s linear;color:white;}
.tags-list ul li a:hover{color:black;} <-- .tags-list and ul is the same element and not nested

The first one accesses the element correctly, and the second one (which is causing the problem) does not match any elements, because it would need a nested ul element.

Upvotes: 0

AForAngular
AForAngular

Reputation: 1

.tags-list ul li a:hover{color:black;} // this line replace by .tags-list li:hover a{color:black;}

Upvotes: 0

connexo
connexo

Reputation: 56754

Change .tags-list ul li a:hover to .tags-list li:hover a. The repeated ul in the selector was making it not match the links.

On top of that, I'd recommend putting the :hover on the li rather than the a, so the text color will also change if you mouse points to the padding surrounding the a.

.tags-list li {
  display: inline-block;
  background-color: #253b5d;
  padding: 1px 10px !important;
  text-transform: lowercase;
  font-weight: normal;
  font-size: 14px;
  transition: all 1s linear;
}

.tags-list li:hover {
  background-color: #aebdd5;
}

.tags-list li a {
  transition: all 1s linear;
  color: white;
}

.tags-list li:hover a {
  color: black;
}
<ul class="tags-list">
  <li><a href="#">Testing</a></li>
  <li><a href="#">Testing</a></li>
  <li><a href="#">Testing</a></li>
  <li><a href="#">Testing</a></li>
  <li><a href="#">Testing</a></li>
  <li><a href="#">Testing</a></li>
</ul>

Upvotes: 0

Mark Baijens
Mark Baijens

Reputation: 13222

Remove the ul., .tags-list already refered to the ul. It does not contain another ul.

.tags-list li{display:inline-block;background-color:#253b5d;    padding: 1px 10px !important;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 14px;   
    transition: all 1s linear;
    }
.tags-list li:hover{background-color: #aebdd5;}
.tags-list li a{transition: all 1s linear;color:white;}
.tags-list li a:hover{color:black;}
<ul class="tags-list">
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>

Upvotes: 4

Related Questions