CODEWITHSUNDEEP
htmlcss
Keshav Agrawal
Keshav Agrawal

Reputation: 597

Change background of a div of fixed height on hover

I have a simple div like the following:

.block {
  height: 200px;
  color: black;
  background-color: white;
}
.block:hover {
  color: white;
  background-color: black;
}
<div class="block">
  <h3>Something</h3>
  <br>
  <h4>Some other heading</h4>
</div>

Looks like a simple one. But the problem is the hover effect works only on the content not on the entire div. Is it because of the height parameter defined explicitly?

Upvotes: 0

Views: 48

Answers (2)

Eli Nathan
Eli Nathan

Reputation: 1141

It works for me! Try adding

background-color: black!important;

If that works then there's a chance something else in your CSS is blocking it from changing.

Upvotes: 0

Asons
Asons

Reputation: 87262

It works how it should, though if the content of your block will overflow the 200px, the div and any other child element, which inherit background color, will show the black background.

So for example your h3/h4 will not get black background but inherit the white font color, and in is this case make them "invisible" against the white background of the body.

If you want the div to grow with its content, change it to min-width: 200px;, or else you might should set overflow: auto, so it scroll the content.

.block {
  min-height: 200px;
  color: black;
  background-color: white;
}
.block:hover {
  color: white;
  background-color: black;
}
<div class="block">
  <h3>Something</h3>
  <br>
  <h4>Some other heading</h4>
  <br>
  <h4>Some other heading</h4>
  <br>
  <h4>Some other heading</h4>
</div>

Upvotes: 2

Related Questions