Desi Desi - 2 months ago 12
CSS Question

CSS/HTML text onhover doesn't change

I want to style the colors of a menu bar.
If the li is "active" then the text color and the border color should be blue, otherwise everything is gray.
On hover, the grey colors should turn blue.

I tried but it doesn't work. This is my code:



@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
ul.dnav {
list-style-type: none;
margin-left: 0px;
margin-right: 0px;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
-moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
font-size: 20px;
background-color: #FFF;
width: 100px;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 0px;
border-style: solid;
border-color: grey;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
}
li.dnav a {
color: grey;
font-family: 'Fjalla One', sans-serif;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li.dnav a:hover {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
border-color: rgba(0, 130, 255, 1);
}
a:active {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
}
li.dnav-active {
border-color: rgba(0, 130, 255, 1);
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
color: rgba(0, 130, 255, 1);
}

<header>
<ul class="dnav">
<li class="dnav dnav-active"><a class="active" href="#">Home</a>
</li>
<li class="dnav"><a href="#">ser</a>
</li>
<li class="dnav"><a href="#">con</a>
</li>
</ul>
</header>




Answer

The problem is you are targeting the 'a' element in the hover selector. The border is placed on the 'li' element instead.

So when you are hovering over the elemennt, only the border of the 'a' element is changing.

You could rewrite you're css to target the LI when hovering (as i did in the snippet), but i can recommend to fully style the 'a' element instead of the 'li'.

In the code snippet below the hover works with a small change to the 'hover' selector.

@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
 ul.dnav {
  list-style-type: none;
  margin-left: 0px;
  margin-right: 0px;
  overflow: hidden;
  width: 400px;
  -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
  font-size: 20px;
  background-color: #FFF;
  width: 100px;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 0px;
  border-style: solid;
  border-color: grey;
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
}
li.dnav a {
  color: grey;
  font-family: 'Fjalla One', sans-serif;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

li.dnav:hover {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
  border-color: rgba(0, 130, 255, 1);
}
a:active {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
}
li.dnav-active {
  border-color: rgba(0, 130, 255, 1);
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  color: rgba(0, 130, 255, 1);
}
<header>
  <ul class="dnav">
    <li class="dnav dnav-active"><a class="active" href="#">Home</a>
    </li>
    <li class="dnav"><a href="#">ser</a>
    </li>
    <li class="dnav"><a href="#">con</a>
    </li>
  </ul>
</header>

Comments