-1

Preciso fazer com que ao passar o mouse por cima dos links do menu, seja removido ou alterado para transparent o background do link que está ativo (da página que estou).

Demonstração: inserir a descrição da imagem aqui

Quando se passa o mouse sobre outro link: inserir a descrição da imagem aqui

Como deve ficar: inserir a descrição da imagem aqui

Como proceder?

.nav-item { padding:5px; }
.nav-item:hover > .nav-link{ background:#000; color:#FFF; }
.ativo > .nav-link { background:blue; color: #FFF; }
body {font-size:14px; font-family: Arial; }
a {color:#000;}
<li class="nav-item ativo">
     <a href="#" class="nav-link">Início</a>
</li>

<li class="nav-item">
     <a href="#" class="nav-link">Transparência</a>
     <ul role="menu" class=" dropdown-menu">
    	 <li class="menu-item">Ao passar o mouse aqui o azul do Início deve sumir
        </li>
    
     </ul>
</li>

3
  • 1
    Você tem o código real disso ai, sem ser a demonstração?
    – Francisco
    1/04/2019 às 20:46
  • Tenho sim, mas é muito complexo, muito conteúdo. Coloquei esse trecho como base pra mim implementar ao original. 1/04/2019 às 20:49
  • Basicamente a estrutura é a mesma. 1/04/2019 às 20:51

3 Respostas 3

2

Basicamente o que vc precisa é um :hover > :hover. Tipo quando fizer :hover na nav vc "desfaz" todos os atributos .ativo, sendo que se vc fizer :hover na nav e :hover no item esse item sim fica o estilo que vc definir.

Então basicamente vc precisa dessas duas regras

    .nav:hover .ativo>.nav-link {
        background: none;
        color: black;
    }

    .nav:hover .nav-item:hover>.nav-link {
        background: #000;
        color: #FFF;
    }

inserir a descrição da imagem aqui

Segue o código completo:

.nav-item {
    padding: 5px;
}



body {
    font-size: 14px;
    font-family: Arial;
}

a {
    color: #000;
}

.nav:hover .ativo>.nav-link {
    background: none;
    color: black;
}

.nav:hover .nav-item:hover>.nav-link {
    background: #000;
    color: #FFF;
}

.nav .ativo>.nav-link {
    background: blue;
    color: #FFF;
}
<ul class="nav">
    <li class="nav-item ativo">
        <a href="#" class="nav-link">Início</a>
    </li>
    <li class="nav-item ">
        <a href="#" class="nav-link">item</a>
    </li>
    <li class="nav-item ">
        <a href="#" class="nav-link">item</a>
    </li>

    <li class="nav-item">
        <a href="#" class="nav-link">Transparência</a>
        <ul role="menu" class=" dropdown-menu">
            <li class="menu-item">Ao passar o mouse aqui o azul do Início deve sumir
            </li>

        </ul>
    </li>
</ul>

5
  • 1
    É exatamente isso!!!!!! 1/04/2019 às 22:46
  • 1
    @AlexandreLopes fico feliz em ter ajudado, depois que optar por uma uma das resposta não deixe de marca-la como aceita ;) qq dúvida comenta ai!
    – hugocsl
    1/04/2019 às 22:57
  • 1
    Caramba! Você foi o único que entendeu o que realmente precisava! Você é um gênio!!!! Obrigado! 1/04/2019 às 22:58
  • 1
    @AlexandreLopes hahaha experiencia de quem trabalha com UI :D. Quando bati o olho imaginei o efeito que desejava. Agora é só fazer o JS para quando clicar adicionar a classe ativo e tira a classe Ativo do que já estiver marcado. []´s
    – hugocsl
    1/04/2019 às 22:59
  • 1
    Nem precisou, só copiei o seu CSS e colei, mudei só o nome de 1 classe, e ficou perfeitoo!!! =D 1/04/2019 às 23:02
1

Olá. Fiz a seguinte solução usando js puro.

var hovers = document.getElementsByName("hover");
var ativo = document.getElementsByClassName("ativo")[0];

for(let i = 0; i < hovers.length; i++){
  hovers[i].addEventListener("mouseover", () => {
    for(let j = 0; j < hovers.length; j++){
      if(!j == i) hovers[j].style.background = "transparent";
      else hovers[j].style.background="#000";
    }
  });
  
  hovers[i].addEventListener("mouseout", () => {
    ativo.children[0].style.background = "yellow";
  });
}
.nav-item { padding:5px; }
.ativo > .nav-link { background:yellow; }
body {font-size:14px; font-family: Arial; }
<li class="nav-item ativo">
 <a href="#" name="hover" class="nav-link">Início</a>
</li>

<li class="nav-item">
 <a href="#" name="hover" class="nav-link">Transparência</a>
 <ul role="menu" class=" dropdown-menu">
   <li class="menu-item">Passe o Mouse aqui
     </li>

 </ul>
</li>
   

3
  • Basicamente é isso! Mas há um problema, quando tiro o mouse de cima, ele não volta ao normal. Deve voltar ao normal. Outra coisa, deve funcionar quando se coloca o mouse em qualquer parte, seja no Link "Transparência", ou no Texto "Passe o Mouse aqui" 1/04/2019 às 21:02
  • Olhei seu código, ele deveria funcionar para várias <li> pois se trata de um menu. E seria interessante ao invés de inserir um style, inserir uma class que já está predefinida no css. 1/04/2019 às 21:16
  • Se liga aí no Fiddle que fiz, de mais ou menos como deve ser: jsfiddle.net/wg7ktenp baseado no seu código. 1/04/2019 às 21:31
1

O problema é o seletor de onde você está utilizando o :hover, coloque-o direto no nav-link e vai funcionar normal:

.nav-item {
  padding: 5px;
}
.nav-link:hover {
  background: #000;
  color: #fff;
}

body {
  font-size: 14px;
  font-family: Arial;
}
a {
  color: #000;
}
<li class="nav-item ativo">
    <a href="#" class="nav-link">Início</a>
</li>

<li class="nav-item">
    <a href="#" class="nav-link">Transparência</a>
    <ul role="menu" class=" dropdown-menu">
        <li class="menu-item">Ao passar o mouse aqui o azul do Início deve sumir
        </li>

    </ul>
</li>

5
  • Não funcionou. Basicamente é como se fosse feito uma troca, o link "Transparência" deve ficar ativo no lugar do "Início" que está ativo. Os dois não podem ficar ao mesmo tempo. 1/04/2019 às 21:04
  • 1
    @AlexandreLopes Funciona sim po, clica em "Executar". Ele ta fazendo exatamente oq vc disse.
    – Francisco
    1/04/2019 às 21:09
  • Quando eu passasse o mouse sobre a <li> Transparência, ele deveria remover o background da <li> Início. E quando tirasse o mouse de cima, ele deveria voltar ao normal. 1/04/2019 às 21:19
  • 1
    Rapaz, mas é exatamente isso que esta ocorrendo. O que ta dando ai pra vc? @AlexandreLopes
    – Francisco
    1/04/2019 às 21:26
  • Olha esse fiddle: jsfiddle.net/wg7ktenp é tipo isso 1/04/2019 às 21:37

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 .