Как создать эффекты при наведении на элементы с помощью CSS :hover

CSS hover (hover – англ. "навести курсор мыши") – это одно из псевдоклассов CSS, который применяется к элементу, когда курсор мыши наведен на него. CSS hover позволяет указывать стили для данного элемента, который находится в состоянии :hover, то есть находится под воздействием указателя мыши. Это делает возможным создание интерактивных элементов на веб-страницах, которые изменяют свой внешний вид при наведении курсора мыши на них.

Примеры использования:

1. Изменение цвета фона элемента при наведении курсора мыши:

.button {
  background-color: #f00;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.2s ease-in-out;
}

.button:hover {
  background-color: #0f0;
}

В данном примере при наведении курсора мыши на элемент с классом .button меняется цвет фона на зеленый.

2. Изменение размера и прозрачности изображения при наведении курсора мыши:

img {
  transition: all 0.2s ease-in-out;
}

img:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

В данном примере используется плавное изменение (эффект плавности при помощи свойства transition) размера изображения и его прозрачности при наведении курсора мыши.

3. Изменение рамки и шрифта при наведении курсора мыши:

button {
  border: 2px solid #333;
  border-radius: 5px;
  padding: 10px;
  color: #333;
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  transition: all 0.2s ease-in-out;
}

button:hover {
  border-color: #f00;
  color: #f00;
  font-size: 20px;
}

В данном примере при наведении курсора мыши на элемент button изменяется цвет рамки, цвет текста и размер шрифта.

В заключении можно сказать, что CSS hover является мощным инструментом для создания интерактивных и уникальных элементов на веб-страницах, которые позволяют усилить взаимодействие пользователей с вашим сайтом.