Как при наведении на элемент менять другой?
У меня проблема с CSS, я сделал 2 кнопки, при наведение на первую вторая меняется; я сделал то же самое, но наоборот и при наведение на второй кнопку, первая не меняется. Как исправить проблему?
Регистрация Вход.button__create-account:hover + .button__login-account < opacity: 0.5; transition: all 0.2s ease-in; >.button__login-account:hover + .button__create-account
- Вопрос задан более трёх лет назад
- 2371 просмотр
Как при наведении на один элемент (hover) менять стили другого элемента css?
Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента? Можно ли это сделать только на css? К примеру навожу на блок, хочу, чтобы все заголовки в этом блоке стали другого цвета.
Лучший ответ
если навел на блок, то в этом блоке можно.
.block:hover h2 — для заголовков h2
Максим ТалейниковПрофи (515) 7 лет назад
Можно ли устроить подобный ховер для кнопки, дабы изменялась как она так и например цвет текста
МАСТЕР Мудрец (15692) При попадании мыши на красный блок, сменится цвет текста. Можно и для соседнего. Щас гляну как, по памяти не помню
Изменяем поведение элементов при наличии точного указателя
Предположим, нам нужно сверстать накладывающиеся друг на друга элементы, которые будут полностью отображаться при наведении. Когда у нас есть курсор, мы без проблем можем навести его на элемент, и при срабатывании события hover, мы отображаем элемент.
Но на сенсорных экранах у нас нет такого точного указателя, как курсор, и даже если срабатывает событие наведения :hover , то эффект остаётся и после того, как мы уберем палец/стилус с элемента, и будет сохранятся до тех пор, пока не произойдёт другое событие. Это некорректное поведение и может запутать пользователя.
На данный момент, есть специальные @media запросы, которые определяют наличие точного указателя, и в статье мы рассмотрим один из вариантов их применения для решения вышеописаной проблемы
Немного теории
Так как сам только исследую эту тему, приведу несколько ссылок на которые я опирался, при написании этого раздела:
Для начала определимся, что у каждого устройства может быть как основное(первичное) устройство ввода, так и второстепенные, и их может быть несколько. Например у ноутбука есть touchpad и клавиатура, можно дополнительно подключить мышь и еще клавиатуру, а также может быть и сенсорный экран. К планшету/смартфону также можно подключить дополнительные устройства ввода
Устройства ввода могут быть точными указателями, как курсор мыши, и могут быть неточными, как касание сенсорного экрана пальцем/стилусом
Перейдём к @media запросам — итак, в нашем распоряжении четыре @media запроса — pointer , hover , any-pointer , any-hover
В чем их отличие?
@media запросы pointer и hover опираются только на основное(первичное) устройство ввода. Так как мы не хотим ограничивать пользователя единственным способом ввода, мы будем использовать другие @media запросы
@media запрос any-pointer будет выполнен, если хотя бы одно устройство ввода имеет точный указатель
@media запрос any-hover будет выполнены если хотя бы одно устройство ввода имеет возможность наведения, то есть может “повиснуть” над элементом, не производя над ним никаких других манипуляций
any-pointer имеет следующие значения
- none — указатель отсутствует
- coarse — есть хотя бы один указатель ограниченной точности
- fine — есть хотя бы один точный указатель
any-hover имеет следующие значения
- none — нет устройств ввода, которые имеют возможность наведения
- hover — есть хотя бы одно устройство ввода, которое имеет возможность наведения
Применение на практике
Применять эту возможность на практике можно в случаях, когда нужно или изменить внешний вид элемента, или его поведение в зависимости от устройства, на котором просматривается сайт
Для сенсорных экранов некоторые элементы можно делать больше по размеру, например область checkbox с галочкой. Такой checkbox будет доступней для пользователя на устройствах без курсора или другого точного устройства ввода
Теперь рассмотрим пример, который был описан в начале статьи.
Practice 
Суть будет в следующем — изначально будем отображать все карточки целиком, а если устройство имеет хотя бы одно устройтво с точным указателем и имеет возможность наведения, то накладываем карточки друг на друга, и при наведении будем отображать необходимый элемент
Пишем стили для устройств, которые не имеют точного указателя, то есть изначально элементы будут отображены полностью, никакого дополнительного поведения у элементов пока не будет
.container < max-width: 1120px; padding: 0 16px; margin: 0 auto; >.section < padding: 64px 0; --color: #f7f3f3; background: var(--color); min-height: 100vh; >.grid < position: relative; >.grid__items < overflow-x: auto; display: flex; position: relative; >.grid__item < height: 128px; width: 128px; border-radius: 50%; background: var(--color); border: 2px solid #000; transition: 0.4s; overflow: hidden; position: relative; flex-shrink: 0; >.grid__item:not(:first-child) < margin-left: -1.4em; >.grid__item img
Чтобы добавить элементам дополнительное поведение для устройств с точным указателем и с возможностью наведения на элемент, будем использовать комбинацию @media запросов
Добавим следующие стили
@media (any-pointer: fine) and (any-hover: hover) < .grid__item:not(:first-child) < margin-left: -4.4em; >.grid__item:hover img < transform: scale(1.2) translateX(-8%); >.grid__item:hover + * < margin-left: -1.4em; >>
Посмотрим результат и разницу отображения и поведения на видео
Итоги
Если до этого мы в основном ориентировались только на разрешение устройства, и в зависимости от этого меняли внешний вид или поведение элементов, то теперь можно ориентироваться на возможности взаимодействия пользователя с устройством
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!
Девять простых примеров CSS3 анимации
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.
body > div
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
.color:hover
2. Появление рамки
Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:
.border:hover
3. Свинг
Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
@-webkit-keyframes swing < 15% < -webkit-transform: translateX(9px); transform: translateX(9px); >30% < -webkit-transform: translateX(-9px); transform: translateX(-9px); >40% < -webkit-transform: translateX(6px); transform: translateX(6px); >50% < -webkit-transform: translateX(-6px); transform: translateX(-6px); >65% < -webkit-transform: translateX(3px); transform: translateX(3px); >100% < -webkit-transform: translateX(0); transform: translateX(0); >> @keyframes swing < 15% < -webkit-transform: translateX(9px); transform: translateX(9px); >30% < -webkit-transform: translateX(-9px); transform: translateX(-9px); >40% < -webkit-transform: translateX(6px); transform: translateX(6px); >50% < -webkit-transform: translateX(-6px); transform: translateX(-6px); >65% < -webkit-transform: translateX(3px); transform: translateX(3px); >100% < -webkit-transform: translateX(0); transform: translateX(0); >> .swing:hover
4. Затухание
Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :
.fade < opacity: 1; >.fade:hover
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
.grow:hover
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
.shrink:hover
7. Трансформация в круг
Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:
.circle:hover
8. Вращение
Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
.rotate:hover
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
.threed:hover
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- ) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- ) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- ) |
| Мобильные браузеры | |
|---|---|
| iOS Safari & Chrome | Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- ) |
| Opera Mobile | Поддерживается с версии 12.1 |
| Android Browser | Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- ) |
| Chrome/Firefox для Android | Поддерживается с версии 47/44 |
| Internet Explorer Mobile | Поддерживается версией IE Mobile 10 и выше |
| UC Browser для Android | Поддерживается с префиксом -webkit- |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!