CODEWITHSUNDEEP
javascripthtmlcss
Zachary Ferretti
Zachary Ferretti

Reputation: 85

How to Change Entire Navbar Color When Hovering on Element in a Navbar

I am setting up my own website, and before I do that, I am working on understanding what I want to do following along with a W3 Schools tutorial.

When you click open, it brings up the overlay properly, and when you hover over the text in the overlay, the text changes color, but I want to make it so that when you hover over text, the background of the overlay changes to an image. As it stands the overlay color is gray, but when I hover over something say "dogs" I want the background to be replaced by a picture of a dog.

I have tried to use the CSS :hover function but was only able to have it change the background-color of the individual navbar element, not the whole overlay.

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
  background-color: red;
 }

This only changes the background color of the navbar element.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

Here is the link to the w3 schools tryIt site, to see the rest of the code.

Upvotes: 0

Views: 536

Answers (2)

Zachary Ferretti
Zachary Ferretti

Reputation: 85

I was able to figure it out, by using JQuery, and this is the code that ended up working for me.

   <script>
     $(".about").hover(function(){
     $(this).parent().parent().css("background","red");
      });
     $(".about").mouseleave(function(){
     $(this).parent().parent().css("background","blue");
     });
   </script>

So basicaly what is happening here is that I have a navbar, which has different links in it each with there own class (for example as you can see here "about" is one). And what I have JQuery do is when you hover over a specific element, it changes the background of the parent attribute.

Note I had to do .parent().parent() because of the way I have it setup, it may be possible to do it with just one .parent().

And then what happensis when you hover over the element in the class it will changed the css of the parent attribute, and then when you the mouse exits the element, the background will go back to what it was originally, so in this case blue.

I hope this helps anyone if they ever have a similar question!

Upvotes: 0

Nicolas De Tiesenhausen
Nicolas De Tiesenhausen

Reputation: 387

In CSS you can not change the style of a parent element by Hovering a children element. You will need Javascript.

Upvotes: 1

Related Questions