使用 css 或 jquery 在子类上添加样式

Question

I wish I could add a style to all the classes below the first div, So when I move the mouse over

all classes must stylize in this way:

background-color:black !important;
color:white !important;

I can't make all the white writing with css

 <div data-id="#hMS2r-2141" class="event-item-wrapper "> <article itemscope="" class="event-list post-2141 simple_event type-simple_event status-publish has-post-thumbnail hentry simple_event_category-eventi"> <div class="media"> <div class="media-left media-middle"> <div class="date-info"> <span class="date-month">May</span> <span class="date-day-year">11, 2018</span> </div> </div> <div class="media-body media-middle"> <div class="info-event"> <h3 class="entry-title">Corso Acquarello</h3> </div> <div class="entry-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...</div> </div> </div> </article> </div>

Answer 1

To apply the styles to any child and subchild of the wrapper on hover do

.event-item-wrapper:hover * {
  background-color:black !important;
  color:white !important;
}

Here is a working jsfiddle .

To apply the styles to specific children of the wrapper on hover, you need to list the specific classes like this

.event-item-wrapper:hover .event-list,
.event-item-wrapper:hover .media,
.event-item-wrapper:hover .media-left,
.event-item-wrapper:hover .date-info,
.event-item-wrapper:hover .date-month {
  background-color:black !important;
  color:white !important;
}

Answer 2

Using Jquery and css :

Jquery:
$(document).ready(function(){
    $(".event-item-wrapper").hover(function(){
        $(this).addClass("Mydivadd");
    });
});

Css:
<style>
.Mydivadd {
  background-color:red !important;
  color:white !important;
}
</style>

Answer 3

@Exolon

Try this code it works:

 #MouseHover:hover{ background-color:black !important; color:white !important; }

 <div data-id="#hMS2r-2141" class="event-item-wrapper" id="MouseHover"> <article itemscope="" class="event-list post-2141 simple_event type-simple_event status-publish has-post-thumbnail hentry simple_event_category-eventi"> <div class="media"> <div class="media-left media-middle"> <div class="date-info"> <span class="date-month">May</span> <span class="date-day-year">11, 2018</span> </div> </div> <div class="media-body media-middle"> <div class="info-event"> <h3 class="entry-title">Corso Acquarello</h3> </div> <div class="entry-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...</div> </div> </div> </article> </div>

I hope above code will be useful for you.

Thank you.