Изменить цвет шрифта H2 внутри div при наведении указателя мыши

Я пытаюсь изменить цвет шрифта h2внутри a wellпри наведении указателя мыши. Цвет фона изменяется правильно, но в то же время мне также нужен цвет шрифта h2 для изменения в белый цвет. Как это сделать?

 .well.sb:hover {
        color: #FFF;
        background-color: blue;
}

.well.sb {
  background-color:green;
  width:400px;
  height:200px;
 }

h2 {
  color:yellow;
}

.flag {
  background-color:#000;
  color:red;
 }
 <div class="well sb">
       <h2>This text should change color and become white on hover-over</h2>
       <div class="flag">FLAG</div>
        </div>

html,css,html5,css3,

1

Ответов: 3


1 принят

Добавьте это правило:

.well.sb:hover h2{
  color: #FFF;
}

.well.sb:hover {
  color: #FFF;
  background-color: blue;
}
.well.sb {
  background-color: green;
  width: 400px;
  height: 200px;
}
h2 {
  color: yellow;
}
.flag {
  background-color: #000;
  color: red;
}

.well.sb:hover h2{
  color: #FFF;
}
<div class="well sb">
  <h2>This text should change color and become white on hover-over</h2>
  <div class="flag">FLAG</div>
</div>


0

Должен быть .class> tag: pseudotag

.well.sb > h2:hover {
   color:white;
 }

0

Вы можете проверить эту ссылку для родительской концепции наведения:

CSS :: child установлен для изменения цвета в родительском зависании, но изменяется также при зависании

HTML, CSS, HTML5, CSS3,
Похожие вопросы
Яндекс.Метрика