Change CSS property when doing :Hover over another menu link

Asked

Viewed 340 times

-1

I need to make sure that by hovering the mouse over the menu links, it is removed or changed to transparent the background of the link that is active (from the page that I am on).

Demonstration: inserir a descrição da imagem aqui

When you hover over another link: inserir a descrição da imagem aqui

As it should be: inserir a descrição da imagem aqui

How to proceed?

.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>

javascript css
  • 1

    You have the real code of it there, other than the demonstration?

  • I do, but it’s very complex, a lot of content. I put this piece as a basis for me to implement to the original.

  • Basically the structure is the same.

3 answers

2


Basically what you need is a :hover > :hover. Like when you do :hover in nav you "undo" all attributes .ativo, whereas if you do :hover in nav and :hover in the item that item yes gets the style you define.

So basically you need these two rules

    .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

Follow the full code:

.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>

  • 1

    That’s exactly what!!!!!!

  • 1

    @Alexandrelopes I am happy to have helped, after choosing one of the answer do not fail to mark it as accepted ;) qq doubt comments ai!

  • 1

    Damn! You were the only one who understood what you really needed! You’re a genius!!!! Thank you!

  • 1

    @Alexandrelopes hahaha experience of those who work with UI :D. When I hit the eye I imagined the effect I desired. Now just do the JS to when click add the active class and take the Active class from what is already marked. []s

  • 1

    You didn’t have to, I just copied your CSS and pasted it, I changed only the name of 1 class, and it was perfect!!! = D

1

Hello. I made the following solution using pure js.

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>

  • Basically that’s it! But there’s a problem, when I take the mouse off, it doesn’t go back to normal. It should go back to normal. Another thing, it should work when you put the mouse anywhere, either in the Link "Transparency", or in the Text "Pass the Mouse here"

  • I looked at your code, it should work for several <li> because it is a menu. And it would be interesting instead of inserting a style, insert a class which is already preset in css.

  • Connect there in the Fiddle I made, more or less as it should be: https://jsfiddle.net/wg7ktenp/ based on your code.

1

The problem is the selector from where you are using the :hover, put it straight on the Nav-link and it will work 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>

  • It didn’t work. Basically it’s like an exchange was made, the "Transparency" link should be active in place of the "Start" that is active. Both can’t stay at the same time.

  • 1

    @Alexandrelopes Works yes po, click on "Run". He’s doing exactly what you said.

  • When I passed the mouse over to <li> Transparency, it should remove the background of <li> Start. And when I took the mouse from above, it should go back to normal.

  • 1

    Boy, but that’s exactly what’s going on. What are you giving yourself? @Alexandrelopes

  • Look at this fiddle: https://jsfiddle.net/wg7ktenp/ is like this

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.