CSS change background color of seperate div when another div is hovered

Question

Given a basic menu and div like below..

 #link:hover ~ #custom { background: #ccc }

 <div class="header"> <div class="nav"> <ul> <li> <a id="link" href="#">Link</a> </li> </ul> </div> </div> <div id="custom"> Custom Content </div>

I have tried using the general sibling combinator but it isn't working.

Is there a way using CSS that I can get the custom div to also change background color when the nav item is hovered?

Do I need Javascript or can this be achieved more simply?

Answer 1

you can change mydiv css with hover mynav try this css.

<style>
#mynavid:hover +#mydivid{color:red;}
</style>

Answer 2

here is the simple code I hope this will help...

 .card { width: 150px; }.image { height: 80px; background-color: tomato; }.description { height: 80px; background-color: limegreen; }.image:hover ~.description.link, .link:hover { color: #ff0; background-color: white; }

 <div class="card"> <div class="image">img</div> <div class="description"> <a class="link" href=#>some link</a> <div class="text">Fulfilled direction use continual set.</div> </div> </div>

Answer 3

Yes you can do it using j-query. The below will be the script code:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $(document).mousemove(function(){ if($("#nav-link:hover").length.= 0){ $(".custom"),css("background-color";"red"). } else{ $(".custom"),css("background-color";""); } }); }); </script> <div class="header"> <div class="nav"> <ul> <li> <a href="#" id="nav-link">Link</a> </li> </ul> </div> </div> <div class="custom"> Custom Content </div>

Add this code to your above code and it will work