CODEWITHSUNDEEP
htmlcss
L. Willis
L. Willis

Reputation: 9

How do I change the color and background color of a single text item in a header nav bar link when hovering?

HTML

<!-- start nav here -->
<nav>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our History</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li>
      <aa href="#">Contact Us</a>
    </li>
  </ul>
</nav>
<!-- end nav here -->

CSS

  header nav li {
    background-color: #CECDC0;
    font-size: 20px;
    font: Noteworthy;
    color: blue;
    float: left;
    margin: 10px;
    margin-top: -2px;
  }

  header nav {
    display: block;
    float: right;
    line-height: -30px;
  }

  header nav li a:hover {
    color: red;
  }

When i add a hover effect like in the example above, it makes all of the text in the nav bar hover. I want "About Us" to have a different hover background color and font color to it. How can I edit the html or css?

Upvotes: 0

Views: 400

Answers (4)

hmjha
hmjha

Reputation: 489

This one is more clean because parent element should be earlier than child.

nav {
  display: block;
}
nav li{
  display: inline-block;
  float: left;
  margin: 10px;
  margin-top: -2px;
}
nav li a{
  background-color: #CECDC0;
  font-size: 20px;
  font: Noteworthy;
  color: blue;
  padding:5px 2px;
  line-height: 30px;
  text-decoration:none;
}
nav li:first-child a:hover {
  color: #fff;
  background-color: gold;
}
nav li a:hover {
  color: red;
}
<nav>
 <ul>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Our History</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
</nav>

Upvotes: 1

Vuice
Vuice

Reputation: 63

I wasn't sure what exactly you wanted, but following is my interpretation.

https://jsfiddle.net/Vuice/1dodL81o/

HTML

<header>
  <!-- start nav here -->
  <nav>
    <ul>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our History</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  <!-- end nav here -->
</header>

CSS

header nav li {
  background-color: #CECDC0;
  font-size: 20px;
  font: Noteworthy;
  color: blue;
  float: left;
  margin: 10px;
  margin-top: -2px;
}
header nav {
  display: block;
  float: right;
  line-height: -30px;
}
header nav li a:hover {
  color: red;
}
header nav li:first-child a:hover {
  color: yellow;
  background-color: green;
}

Upvotes: 0

Zakalwe
Zakalwe

Reputation: 232

You can uses a class to target the specific list item.

Jsfiddle.

HTML

<nav>
  <ul>
    <li class="target"><a href="#">About Us</a></li>
    <li><a href="#">Our History</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

nav li {
  background-color: #CECDC0;
  font-size: 20px;
  font: Noteworthy;
  color: blue;
  float: left;
  margin: 10px;
  margin-top: -2px;
}

nav {
  display: block;
  float: right;
  line-height: -30px;
}

nav li a:hover {
  color: red;
}

.target a:hover {
  color: #fff;
  background-color: gold;
}

Upvotes: 0

Ricardo Pontual
Ricardo Pontual

Reputation: 3757

You can do this to select the first item (About Us):

header nav li:first-child a:hover {
 color: red;
}

Upvotes: 0

Related Questions