ChaCol ChaCol - 1 month ago 5
CSS Question

How to make :hover only affect lettering instead of the box?

I'm curious to how you make it so your :hover property will only affect the individual letters in my navigation bar instead of just hovering over the the box.



* {
margin: 0px;
padding: 0px;
}
.navigation-bar {
height: 3.2em;
background: gray;
text-align: center;
border-top: 2px solid;
border-bottom: 2px solid;
}
.navigation-bar ul {
display: inline-block;
list-style-type: none;
}
.navigation-bar li {
display: inline;
}
.navigation-bar li a {
color: white;
padding: 0px 30px;
margin: 1em 0 0 -2px;
text-decoration: none;
float: left;
height: 1.2em;
line-height: 1.2em;
}
.navigation-bar li a:hover,
a:focus {
background-color: #111;
}

<!DOCTYPE html>
<link rel="stylesheet" href="navbar1.css">
<div class="navigation-bar">
<div id="navigation-container">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Gallery</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>

</html>





Here is an example of my code:
https://jsfiddle.net/uz081886/

Right now when hovering over a tab it shows a black bar, how do I make it so it would just highlight the letters of each word? Such as when I hover over Home, the text color will turn to black instead of white without the black bar appearing?

Ben Ben
Answer

Try changing

.navigation-bar li a:hover, 
a:focus {
  background-color: #111;
}

to

.navigation-bar li a:hover, 
a:focus {
  color: #111;
}

This works because background-color targets the fill color of the element while color targets the color of the text.

Comments