Prevent links hover effect from logo

Question

I created a navigation bar with logo. I wanted the logo to be clickable so I can assign it to home page when clicked. I used <a href=“#”<img src=“../images/logo.jpg”><a> . Everything is working okay except one problem. I applied hover effects a.active, a:hover on the ul links. Somehow I get the effect applied to the logo as well when I hover it on. I wanted it to apply to only the link that's (Home, About, Services etc) and not the logo.

 * { padding: 0; margin: 0; font-family: Arial; }.navcase { width: 100%; height: 100px; background: coral }.logo { width: 300px; height: 90px; float: left; } nav { float: right; } nav ul li { display: inline-block; margin: 20px; } nav a { line-height: 50px; list-style: none; text-decoration: none; border: 1px solid transparent; padding: 7px 10px; color: white; } a.active, a:hover { border: 1px solid white; text-transform: uppercase; }

 <div class="navcase"> <div class="logo"> <a href="#"> <img src="../logo/logo.png"> </a> </div> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Forms</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Feedback</a></li> </ul> </nav> </div>

The problem is the logo also receives border effect when I hover on it. This shouldn't be. I don't want any effect on the logo

Answer 1

try to use

ul a.active,
ul a:hover {
  border: 1px solid white;
  text-transform: uppercase;
}

or if you want to be more specific

ul > li > a.active,
ul > li > a:hover {
  border: 1px solid white;
  text-transform: uppercase;
}