:hover + :not - как оптимально реализовать?

147

29 декабря 2019, 21:40

Столкнулась со следующей проблемой, которую хотелось бы решить лаконичнее в одну строку. Необходимо чтобы при наведении на пункты меню появлялось подчеркивании, но его не было на логотипе: Сам код менюхи выглядит так:

Пробовала так (не работает):

.menu > ul> li>  a:hover:not(.logo){ 
    border-bottom: solid 2px #1a1a1a; 
}

<nav class="menu"> 
   <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li class="logo"><a href="#"><img src="images/logo.png" alt="INK TATTOO"></a></li> 
       <li><a href="#">Faq</a></li> 
       <li><a href="#">Find us</a></li> 
       <li><a href="#">Contacts</a></li> 
</ul> 
  </nav>

Может косякнула в псевдоклассах? И можно ли такое реализовать в одну строку?

Answer 1

именно, косяк. Если следовать вашему css, класс .logo должен быть не у li, а у ссылки a

.menu > ul> li>  a:hover:not(.logo){ 
    border-bottom: solid 2px #1a1a1a; 
}

<nav class="menu"> 
   <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#" class="logo"><img src="images/logo.png" alt="INK TATTOO"></a></li> 
       <li><a href="#">Faq</a></li> 
       <li><a href="#">Find us</a></li> 
       <li><a href="#">Contacts</a></li> 
</ul> 
  </nav>