0

Tenho a seguinte estrutura:

<div class="submenu">
<ul>
    <li>
        <div class="btn-submenu btn-submenu-xstore"></div>
        <a href="/plataforma-de-ecommerce">xStore - Plataforma de E-commerce</a>
        <div class="submenuDescription">Tecnologia para a realização de vendas de forma prática, segura e completa.</div>
    </li>
</ul>

Eu quero que quando eu passe o mouse no ul, ele modifique o background da própria ul e também as cores de a e da div submenuDescription. E também o background-position de btn-submenu-xstore.

Fiz isso daqui, mas não deu certo:

.submenu ul:hover {background: #00478d;}
.submenu ul:hover .submenu ul li a {color: #fff;}
.submenu ul:hover .submenuDescription {color: #fff;}
.submenu ul:hover .btn-submenu-xstore {background-position: -50px}

O único que funciona é o .submenu ul:hover {background: #00478d;}

1 Resposta 1

1

A segunda linha do CSS está incorreta, mas o restante está funcionando. Deve ficar assim:

.submenu ul:hover {background: #00478d;}
.submenu ul:hover li a {color: #fff;}
.submenu ul:hover .submenuDescription {color: #fff;}

EDIT

.submenu ul:hover .btn-submenu-xstore, 
.submenu ul:hover .btn-submenu-b2b,
.submenu ul:hover .btn-submenu-marketplace {background-position: -50px}
5
  • Muito obrigado, teria como eu incluir mais duas classes em .submenu ul:hover .btn-submenu-xstore {background-position: -50px} ? Commented 13/06/2017 às 14:43
  • .btn-submenu-b2b e .btn-submenu-marketplace Commented 13/06/2017 às 14:44
  • 1
    Sim, separe com virgulas. Cheque a edição! :) Commented 13/06/2017 às 14:46
  • Funcionou, muito obrigado. Commented 13/06/2017 às 14:49
  • @FelipeStoker De nada! Boa sorte! Commented 13/06/2017 às 14:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .