Div css hover: hover — Изменение стиля одного div-блока при наведении мыши на другой div-блок

02.06.2023 Facebook Twitter LinkedIn Google+ Разное

html — Изменение элементов при наведении css hover

Вопрос задан

Изменён 2 года 1 месяц назад

Просмотрен 83 раза

Подскажите пожалуйста, почему при наведении на третий div не меняется размер второго div, как при наведении на первый div.

#block {
width: 50%;
white-space: nowrap;
}
.div {
  display: inline-block;
  text-align: center;
}
div:nth-child(1) {
  width: 10%;
  background: red;
}
div:nth-child(2) {
  width: 80%;
  background: blue;
}
div:nth-child(3) {
  width: 10%;
  background: green;
}
div:nth-child(1):hover {
    width: 80%;
}
div:nth-child(1):hover + div:nth-child(2) {
    width: 10%; 
}
div:nth-child(3):hover {
    width: 80%;
}
div:nth-child(3):hover + div:nth-child(2) {
    width: 10%; 
}
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
  • html
  • css

Если пользуетесь селекторами, то должны знать, как они работают.

Поведение последующих и вложенных элементов не может влиять на предыдущие элементы и/или родителей.

Но, можно сделать следующим образом:

#block {
  width: 50%;
  display: flex;
}
.div {
  display: inline-block;
  text-align: center;
  min-width: 10%;
}
.div:nth-child(1) { background: red; }
.div:nth-child(1):hover { min-width: 80%; }
.div:nth-child(2) {
  flex-basis: 80%;
  background: blue;
}
.div:nth-child(3) { background: green; }
.div:nth-child(3):hover { min-width: 80%; }
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Потому что + это СЛЕДУЮЩИЙ элемент. А вы выбираете «следующий, но второй» )

Можете попробовать при

hover родителю задавать всем дочерним по 10%, а при hover на дочерний перебивать свойства родительского ховера

#block {
  width: 50%;
  white-space: nowrap;
  font-size: 0;
}
.div {
  display: inline-block;
  text-align: center;
  font-size: 1rem;
}
. div:nth-child(1) {
  width: 10%;
  background: red;
}
.div:nth-child(2) {
  width: 80%;
  background: blue;
}
.div:nth-child(3) {
  width: 10%;
  background: green;
}
#block:hover .div{
    width: 10%;
}
#block .div:hover{
  width: 80%;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

7

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

:hover — CSS — Дока

Кратко

Скопировано

Хорошим паттерном в сайтостроении считается реакция элементов на действия пользователя. Например, если на элемент можно нажать, то при наведении курсора его стили должны немного меняться, как бы говоря пользователю «Нажми меня!»

Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover.

Пример

Скопировано

Ссылка в спокойном состоянии будет чёрного цвета и без подчёркивания, а при наведении курсора мыши сменит цвет на розовый, и у неё появится подчёркивание. Пользователь поймёт, что это интерактивный элемент, с которым можно взаимодействовать.

.link {  color: #000;  text-decoration: none;}.link:hover {  color: pink;  text-decoration: underline;}
          .link {
  color: #000;
  text-decoration: none;
}
.link:hover {
  color: pink;
  text-decoration: underline;
}

Как пишется

Скопировано

После любого селектора ставим двоеточие и пишем ключевое слово hover.

Селектор по тегу в состоянии

:hover

Скопировано

a:hover {  /* Стили */}
          a:hover {
  /* Стили */
}

Селектор по классу в состоянии

:hover

Скопировано

.link:hover {  /* Стили */}
          .link:hover {
  /* Стили */
}

Составной селектор в состоянии

:hover

Скопировано

li .link:hover {  /* Стили */}
          li .link:hover {
  /* Стили */
}

Селектор по id в состоянии

:hover

Скопировано

#id:hover {  /* Стили */}
          #id:hover {
  /* Стили */
}

Селектор по классу и его псевдоэлемент в состоянии

:hover

Скопировано

.link::before:hover {  /* Стили */}
          .link::before:hover {
  /* Стили */
}

Как понять

Скопировано

Браузер подставляет любому элементу, на который наводится курсор, пометку в виде автоматически создаваемого класса. Мы можем стилизовать этот класс на своё усмотрение, при этом сама логика и механизм отслеживания наведения курсора будут скрыты под капотом движка браузера.

Подсказки

Скопировано

💡 :hover можно очень круто анимировать, добавив в блок кода свойство transition 🎉

💡 На наведения курсора может реагировать абсолютно любой элемент, необязательно ссылка или кнопка.

💡 Если дизайнер не нарисовал в макете разные состояния, либо просите у него это сделать, либо пропишите стили на своё усмотрение. Но любой элемент, на который можно нажать, должен иметь как минимум стили для :hover.

На практике

Скопировано

Дмитрий Волков советует

Скопировано

💡 А что если на сайт зайти с планшета, к которому подключена bluetooth-мышь? Однозначно, ховер должен работать! А если дополнительных устройств ввода нет, то, конечно, стили по наведению должны быть сброшены, чтобы избежать визуального залипания при нажатии на соответствующие элементы.

Вот удобная практика для таких случаев, она ещё и позволяет писать чуточку меньше кода.

🛠 Чтобы не писать дополнительные обнуления ховер-стилей для тач-устройств, состояние :hover удобно задавать внутри медиавыражений с условием по типу взаимодействия с устройством.

Пример, исключающий тач-устройства, но не полностью:

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  transition: background-color 0.5s linear;}/* Есть возможность навести указатель на элемент */@media (any-hover: hover) {  .link:hover {    background-color: #2E9AFF;    transition: background-color 0.1s linear;  }}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  transition: background-color 0.5s linear;
}
/* Есть возможность навести указатель на элемент */
@media (any-hover: hover) {
  .link:hover {
    background-color: #2E9AFF;
    transition: background-color 0.1s linear;
  }
}
Открыть демо в новой вкладке

🎁

Условие any-hover: hover допускает устройства с сенсорным экраном, но только если подключено дополнительное устройство ввода с нужной функциональностью для ховера (мышь, тачпад и т.

п.)

Таким образом, мы успешно задали стили по наведению на ссылку, которые не будут учтены на мобильных устройствах, но заработают, если имеется курсор.

По аналогии можно использовать и другое состояние — :active.

Алёна Батицкая советует

Скопировано

🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть.

Хорошая практика — сбрасывать :hover стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут залипать — телефон не знает, когда вы отводите палец в сторону.

🛠 Сайт смотрится аккуратнее и интереснее, если изменение стилей происходит с лёгкой анимацией, а не резко. Этот принцип взят из окружающего нас мира. Вспомните хоть одно событие, которое происходит резко, моментально, без промежуточных стадий.

Не вспомните 😏

Я в своей работе стараюсь делать анимацию стилей для наведения по принципу «появляется быстро, пропадает медленно». Это позволяет пользователю быстро увидеть реакцию на свои действия и не дожидаться окончания анимации.

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  /* Скорость исчезновения фонового цвета */  transition: background-color 0.5s linear;}.link:hover {  background-color: #2E9AFF;  /* Скорость изменения фонового цвета на голубой */  transition: background-color 0.1s linear;}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  /* Скорость исчезновения фонового цвета */
  transition: background-color 0.5s linear;
}
.link:hover {
  background-color: #2E9AFF;
  /* Скорость изменения фонового цвета на голубой */
  transition: background-color 0.1s linear;
}
Открыть демо в новой вкладке

Ссылка быстро (за 0.1 секунды) меняет фоновый цвет на голубой при наведении курсора и чуть медленнее (за 0.5 секунды) приходит обратно в исходное состояние, когда курсор уводится за пределы ссылки.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active.

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

CSS :hover Селектор

❮ Назад Справочник по селекторам CSS Далее ❯


Пример

Выбор и стиль ссылки при наведении на нее курсора:

a:hover {
  фоновый цвет: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор :hover используется для выбора элементов при наведении на них указателя мыши.

Совет: Селектор :hover можно использовать для всех элементов, а не только по ссылкам.

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и :active селектор для оформления активной ссылки.

Примечание: :hover ДОЛЖЕН идти после :link и :visited (если они присутствуют) в определении CSS, чтобы быть эффективным!

Версия: CSS1

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:наведение 4,0 7,0 2,0 3.1 9,6

Примечание: В IE должен быть объявлен чтобы селектор :hover работал с другими элементами, кроме элемента .

Синтаксис CSS

:hover {
 объявления css ;
} Демонстрация

Дополнительные примеры

Пример

Выбор и стиль элемента

,

и

при наведении на него курсора:

p:hover, h2:hover, a:hover {
  background -цвет: желтый;
}

Попробуйте сами »

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a. ex1:hover, a.ex1:active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

Попробуйте сами »

Пример

Наведите указатель мыши на элемент , чтобы отобразить элемент

(как всплывающую подсказку):

div {
  отображение: нет;
}

span:hover + div {
  display: block;
}

Попробуйте сами »

Пример

Показать и скрыть «выпадающее» меню при наведении курсора мыши:

ul {
  display: inline;
  поля: 0;
  заполнение: 0;
}
ul li {отображение: встроенный блок;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  ширина: 200 пикселей;
  отображение: нет;
}
ул ли уль ли {
  background: #555;
  отображение: блок;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Попробуйте сами »

Связанные страницы

CSS0 tutorial: CSS0 Links 9

Учебное пособие по CSS: Псевдоклассы CSS

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

css — изменение цвета фона при наведении div?

Задавать вопрос

спросил

Изменено 1 год, 9 месяцев назад

Просмотрено 365 тысяч раз

Как я могу заставить его действовать так, как если бы строка div была привязана, поэтому, когда я наводил на нее курсор, он возвращался к красному

CSS 
 .e
{
 ширина: 90 пикселей;
 граница справа: 1px сплошная # 222;
 выравнивание текста: по центру;
 плыть налево;
 отступ слева: 2px;
 курсор:указатель;
}
.
Comments
Leave Comment