изменение фона DIV фиксированной высоты на парении

Question

У меня есть простой DIV вроде следующего:

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

выглядит как простой. Но проблема заключается в том, что эффект зависания работает только на контент, а не на весь div. Это из-за явно определенного параметра высоты?

Answer 1

Это работает для меня! Попробуйте добавить

background-color: black!important;

Если это работает, то есть шанс, что что-то еще в вашем CSS блокирует его изменения.

Answer 2

Он работает как следует, хотя если содержимое вашего block переполнит 200px, div и любой другой дочерний элемент, который наследует цвет фона, покажут черный фон.

Так, например, ваш h3/h4 не получит черный фон, но наследует белый цвет шрифта, а в этом случае делает их «невидимыми» на белом фоне тела.

Если вы хотите, чтобы div увеличивался с его содержимым, измените его на min-width: 200px;, иначе вы можете установить overflow: auto, чтобы он прокручивал содержимое.

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