CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Exolon
Exolon

Reputation: 11

Add Style on subclass with css or jquery

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>

Upvotes: 0

Views: 240

Answers (3)

Makwana Prahlad
Makwana Prahlad

Reputation: 967

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

Upvotes: 0

Himesh Parmar
Himesh Parmar

Reputation: 54

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>

Upvotes: 1

Mario A
Mario A

Reputation: 3363

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;
}

Upvotes: 2

Related Questions