Блог

Главная - Вопросы по программированию - Наведите цвет на контейнер, чтобы переопределить цвет внутреннего компонента

Наведите цвет на контейнер, чтобы переопределить цвет внутреннего компонента

#html #css

#HTML #css

Вопрос:

У меня есть следующая настройка:

 .container {
  color: #0000ff;
}

.container:hover {
  color: #00ff00;
}

.item1 {
  color: #ff0000;
}

.item1:hover {
  color: #00ff00;
}  
 <div class="container">
  <div class="item1">
    item 1
  </div>
  <div>
    item 2
  </div>
  <div>
    item 3
  </div>
</div>

Внутри контейнера я хочу item1 иметь другой цвет, но когда я навожу курсор на контейнер, я хочу, чтобы все элементы были одного цвета. При текущей настройке .item1 цвет переопределяет цвет наведения контейнера. Как я могу этого добиться?

Ответ №1:

Более конкретные правила сильнее. В этом случае правило для класса в элементе сильнее, чем унаследованное значение.

Вы можете создать конкретное правило для .item1 — .container:hover, .container:hover .item1 { .

 .container {
  color: #0000ff;
}

.container:hover,
.container:hover .item1 {
  color: #00ff00;
}

.item1 {
  color: #ff0000;
}  
 <div class="container">
  <div class="item1">
    item 1
  </div>
  <div>
    item 2
  </div>
  <div>
    item 3
  </div>
</div>

Другой вариант — добавить правило для всех элементов при наведении курсора мыши на контейнер .container:hover, .container:hover .item { . Это потребует от вас добавления .item класса ко всем элементам, но будет более расширяемым — вам не нужно будет создавать отдельное правило для future .item2 , .item3 которое будет иметь разные цвета.

 .container {
  color: #0000ff;
}

.container:hover, .container:hover .item {
  color: #00ff00;
}

.item1 {
  color: #ff0000;
}  
 <div class="container">
  <div class="item item1">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
</div>

Ответ №2:

Просто добавьте этот стиль в основной css.

 .container:hover .item1 {
  color: #00ff00;
}

Если вы установите цвет элемента 1 по container:hover условию, он перезапишет исходный item1 цветовой стиль.

 .container {
  color: #0000ff;
}

.container:hover {
  color: #00ff00;
}

.container:hover .item1 {
  color: #00ff00;
}

.item1 {
  color: #ff0000;
}  
 <div class="container">
  <div class="item1">
    item 1
  </div>
  <div>
    item 2
  </div>
  <div>
    item 3
  </div>
</div>