CODEWITHSUNDEEP
htmlcss
ProfK
ProfK

Reputation: 51063

Change background colour of whole div on hover

I have the following layout:

<div class="index-card" data-card-index="5">
    <div class="row">
        <div class="col-md-12 text-center">
            5
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center card-symbol">
            ה
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center"><i>He</i></div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <i>H</i>
        </div>
    </div>
</div>

And this CSS rule:

.index-card :hover {
    background-color: lightgoldenrodyellow;
}

Yet when I hover over empty space in the .index-card div, nothing happens. When I hover over individual child divs, such as .card-symbol, then only the background colour of that inner div changes.

How do I make the whole background of the .index-card div change colour on hover? Also, why does the whole div not change colour? The CSS rule is not for the inner divs but for the whole outer div.

Upvotes: 0

Views: 6133

Answers (2)

Mahbub Hasan
Mahbub Hasan

Reputation: 121

.my-card {
  background-color: white;
}

.my-card:hover {
  background-color: green;
}

if you want transition so you can use it transition: 0.5s;

.my-card {
   background-color: white;
   transition: 0.5s;
}
.my-card:hover {
  background-color: white;
}

Upvotes: 1

Polymer
Polymer

Reputation: 1108

The space after the class in the CSS, this causes any child elements to have the property applied instead. Remove the space, remove the issue 

.index-card {
  background: white;
}

.index-card:hover {
  background: red;
}
<div class="index-card" data-card-index="5">
    <div class="row">
        <div class="col-md-12 text-center">
            5
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center card-symbol">
            ה
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center"><i>He</i></div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <i>H</i>
        </div>
    </div>
</div>

Upvotes: 4

Related Questions