When <li> get Hover Change the out Div Class

Question

So when someone hover a <li> I need that my Div get his class changed.

How can I do This?

Is this possibile using only css or do I need to put some JS inside?

Edit 1: each li will have a especific id, and the div would recive the id as a class.

Answer 1

I think you should to use JQuery:

$(document).ready(function(){

$("li").mouseover(function(event){
   $("#capa").addClass("class");
});

});

Answer 2

Go to your div style class definitions and add "li:hover" near the name;

 .yourDiv { font-size:14pt; }

then turn to this

 .yourDiv li:hover { font-size:14pt; }

Answer 3

To assign a class to the parenting <div> element based on the ID of a hovered child <li> , first check for the hover and get the ID name, then assign it to the parenting <div> .

The following is a code that you will be able to use for several divs on a page, and it will reset the class names on leaving the <li> hover, by using the out handler of the jQuery method:

 $(".changeme ul li").hover(function(){ $(this).parents("div").addClass($(this).attr("id")); }, function(){ $(this).parents("div").removeClass($(this).attr("id")); }); 

 .changeme{ background-color:#eee; } .changeme.firstli{ background-color:#ffd; } .changeme.secondli{ background-color:#fdd; } .changeme.thirdli{ background-color:#dfd; } .changeme.fourthli{ background-color:#ddf; } .changeme.fifthli{ background-color:#ddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="unaffected"> <p> some other parenting div, not affected</p> <div class="changeme"> <p>some text, nothing changes</p> <ul> <li id="firstli">we are changing our parentting div!</li> <li id="secondli">we are changing our parentting div!</li> <li id="thirdli">we are changing our parentting div!</li> </ul> <p>some text, nothing changes</p> <ul> <li id="fourthli">we are changing our parentting div!</li> <li id="fifthli">we are changing our parentting div!</li> </ul> <p>some text, nothing changes</p> </div> </div> 

https://jsfiddle.net/svArtist/adq5dr68/

Answer 4

您可以只使用：hover属性，那样就不必更改div的类，而这只能使用javascript来完成。

Answer 5

CSS hover attributes can be used to specify how an element should appear on hover, but not how some other element should appear when the first is hovered over. Achieving behavior of that complexity requires a touch of JavaScript.

 (function() { var div = document.getElementById("parent"); // save a reference to the target div var lis = div.querySelectorAll("li"); // get your <li> tags for (var i = 0, len = lis.length; i < len; i++) { lis[i].onmouseover = updateDivClass; // attach the event listener to each tag } div.onmouseout = function() { // remove class when no longer hovering over div this.className = ""; }; function updateDivClass() { // apply class to div when hovering over <li> tag div.className = this.id; } })(); 

 .Class1 { background-color: #df7000; font-family: Calibri; color: black; } .Class2 { background-color: purple; color: white; font-family: Segoe UI; } .Class3 { background-color: black; color: lightgreen; font-family: courier; } 

 <div id="parent"> Hover over a class below to apply the class to the entire div. <ul> <li id="Class1">Black Calibri with Orange Background</li> <li id="Class2">White Segoe UI with Purple Background</li> <li id="Class3">Light Green Courier with Black Background</li> </ul> </div>