Question 167381 in Html Question posted in
Some basic documentation can be found here.

Html – it doesn't work when i hover my li's in my navbar

when i clone rolex website to improve myself, when i hover over the li’s in my navigation bar i want the color of both my svgs and a tags to change but it’s not working;

 <ul class="nav-links">
            <li>
                <svg height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m14.8 13.4-4-4c.7-1 1.1-2.1 1.1-3.4 0-3.2-2.6-5.8-5.8-5.8-3.3 0-5.9 2.6-5.9 5.8s2.6 5.8 5.8 5.8c1.3 0 2.4-.4 3.4-1.1l4 4zm-8.8-3.5c-2.1 0-3.9-1.7-3.9-3.9 0-2.1 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z">
                    </path>
                </svg>
                <a class="nav-a" href="#">Search</a>
            </li>
            <li>
                <svg viewBox="0 0 15 15">
                    <path
                        d="M7.5,0.5c-3,0-5.4,2.4-5.4,5.4c0,1.1,0.7,2.6,1.7,4c1.7,2.3,3.7,4.6,3.7,4.6s2-2.4,3.7-4.6  c0.9-1.4,1.7-2.9,1.7-4C12.9,2.9,10.5,0.5,7.5,0.5z M7.5,8.4C6.1,8.4,5,7.2,5,5.9c0-1.4,1.1-2.5,2.5-2.5S10,4.5,10,5.9  S8.9,8.4,7.5,8.4z">
                    </path>
                </svg>
                <a class="nav-a" href="#">Store locator</a>
            </li>
            <li>
                <svg class="undefined css-1emgvlg e10fsun60" height="18" width="18" viewBox="0 0 15 15"
                    xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="">
                    <path
                        d="m7.5 14.8-6.2-6.2c-1.7-1.7-1.7-4.5 0-6.2.8-.8 1.9-1.3 3.1-1.3 1.2 0 2.2.5 3.1 1.3v.1c.8-.8 1.9-1.3 3.1-1.3s2.2.5 3.1 1.3c1.7 1.7 1.7 4.5 0 6.2zm-3.1-11.6c-.6 0-1.2.2-1.6.7-.9.9-.9 2.4 0 3.3l4.7 4.8 4.7-4.8c.9-.9.9-2.4 0-3.3-.8-.9-2.4-.9-3.2 0l-1.5 1.5-1.5-1.5c-.4-.5-1-.7-1.6-.7z">
                    </path>
                </svg>
                <a class="nav-a" href="#">Favourites</a>
            </li>
        </ul>

css;

#nav-bar .nav-links {
    display: flex;
}

#nav-bar .nav-links li {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-left: 30px;
}

.nav-links li:hover{
   color: red; /*it doesnt work, i tried it*/
}

#nav-bar .nav-links svg {
    height: 18px;
    width: 18px;
    fill: #fefefe;
}

#nav-bar .nav-links li a {
    color: #fefefe;
    font-size: 14.5px;
    margin-left: 8px;
}

i tried this way

.nav-links li:hover{
    color: red;
}

but not worked, please help me, why it not working

Tags:

2

Answers


  1. 0

    This targets the li element.

    .nav-links li:hover{
   color: red; /*it doesnt work, i tried it*/
}

    want the color of both my svgs

    color doesn’t do anything on an SVG. You need to target a more specific element (like the path) and use a propertiy that actually affects it (like fill.

    and a tags to change but it’s not working;

    You gave the a elements their own color:

    #nav-bar .nav-links li a {
    color: #fefefe;

    Even if you didn’t, a elements have their own colour by default.

    They aren’t going to inherit from the the li.

    Again, you need to target the a element itself, not the li.

    Login or Signup to reply.
  2. 0

    It’s because you have to address the a separately, and the fill color must be defined for the svg too, and only fill color can be changed for the svg.

    #nav-bar .nav-links {
  display: flex;
}

#nav-bar .nav-links li {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-left: 30px;
}

.nav-links li:hover {
  color: red;
  /*it doesnt work, i tried it*/
}

#nav-bar .nav-links svg {
  height: 18px;
  width: 18px;
  fill: #fefefe;
}

#nav-bar .nav-links li a {
  color: #fefefe;
  font-size: 14.5px;
  margin-left: 8px;
}


/*new code from here*/

.nav-links li a:hover {
  color: red;
}

.nav-links li:hover path {
  fill: red;
}
    <ul class="nav-links">
  <li>
    <svg height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#000000"
                        d="m14.8 13.4-4-4c.7-1 1.1-2.1 1.1-3.4 0-3.2-2.6-5.8-5.8-5.8-3.3 0-5.9 2.6-5.9 5.8s2.6 5.8 5.8 5.8c1.3 0 2.4-.4 3.4-1.1l4 4zm-8.8-3.5c-2.1 0-3.9-1.7-3.9-3.9 0-2.1 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Search</a>
  </li>
  <li>
    <svg viewBox="0 0 15 15">
                    <path fill="#000000"
                        d="M7.5,0.5c-3,0-5.4,2.4-5.4,5.4c0,1.1,0.7,2.6,1.7,4c1.7,2.3,3.7,4.6,3.7,4.6s2-2.4,3.7-4.6  c0.9-1.4,1.7-2.9,1.7-4C12.9,2.9,10.5,0.5,7.5,0.5z M7.5,8.4C6.1,8.4,5,7.2,5,5.9c0-1.4,1.1-2.5,2.5-2.5S10,4.5,10,5.9  S8.9,8.4,7.5,8.4z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Store locator</a>
  </li>
  <li>
    <svg class="undefined css-1emgvlg e10fsun60" height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="">
                    <path fill="#000000"
                        d="m7.5 14.8-6.2-6.2c-1.7-1.7-1.7-4.5 0-6.2.8-.8 1.9-1.3 3.1-1.3 1.2 0 2.2.5 3.1 1.3v.1c.8-.8 1.9-1.3 3.1-1.3s2.2.5 3.1 1.3c1.7 1.7 1.7 4.5 0 6.2zm-3.1-11.6c-.6 0-1.2.2-1.6.7-.9.9-.9 2.4 0 3.3l4.7 4.8 4.7-4.8c.9-.9.9-2.4 0-3.3-.8-.9-2.4-.9-3.2 0l-1.5 1.5-1.5-1.5c-.4-.5-1-.7-1.6-.7z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Favourites</a>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search