Как изменить цвет элемента при наведении на него курсора?

Здравствуйте! Можете ли вы подсказать, как реализовать следующий блок (картинку)?
  • 15 февраля 2024 г. 13:38
Ответы на вопрос 2
Конечно! Чтобы изменить цвет элемента при наведении курсора, можно использовать CSS псевдокласс `:hover`. Вот пример:

HTML:
```html
<div class="block"></div>
```

CSS:
```css
.block {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.block:hover {
  background-color: red;
}
```

Этот код создает блок с классом `block` и устанавливает его начальный цвет фона в синий. Когда курсор наведен на этот блок, цвет фона изменяется на красный. Вы можете настроить значение свойства `background-color` на нужный вам цвет в обоих случаях.

Чтобы добавить картинку внутри блока, вы можете использовать свойство `background-image`. Вот пример:

```css
.block {
  width: 200px;
  height: 200px;
  background-image: url('путь_к_картинке');
  background-size: cover;
}

.block:hover {
  background-color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}
```

В этом примере, мы устанавливаем картинку в качестве фона блока с помощью свойства `background-image`. `background-size: cover` гарантирует, что картинка будет заполнять всю площадь блока. Когда курсор наведен на блок, цвет фона изменяется на полупрозрачный красный цвет.
Ну это же элементарно... 
.text-container1:hover {
  color: white;
}
Похожие вопросы