Как при наведении на один элемент hover менять стили другого элемента css
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71a9a2b2cf9591e4 • Your IP : 82.102.23.104 • Performance & security by Cloudflare
Как при наведении на один элемент менять стили другого элемента?
Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
Можно ли это сделать только на css ?
К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали другого цвета.
Как записать?
Так не работает:
Для соседних элементов:
Для любых элементов(оба блока должны быть внутри одного элемента):
Заранее говорю, русский язык у меня не самая сильная сторона, заранее извиняюсь за ошибки, если будут 😉 Выше показанные примеры все правильные, но они очень ограничены, при желании изменить другой элемент(который может быть совсем далеко) будет не возможно что-то изменить. Но я могу предложить вариант с JavaScript и он чень простой для усвоения. Главное не бойтесь использовать 🙂
Если нужно изменить все заголовки в одном блоке, на который навели курсор мыши, то вот так:
Если же нужно изменять стиль элемента, который находится выше элемента с псевдоклассом :hover, то я делал так (размещал изменяемый элемент ниже элемента с псевдоклассом :hover и при помощи flexbox вытягивал его на нужное мне место):
По сути, ответа на поставленый вопрос нет пока.
«Как при наведении на один элемент (hover) менять стили другого элемента css?»
Видимо если элементы не соседние и не дочерние, то только скриптами.
Здесь по классическому CSS за меня всё уже сказали, однако добавлю, что если Вы хотите писать так, как указали (цитирую):
Можете использовать препроцессоры CSS (SASS/LESS).
Это так скажем усовершенствованный CSS, в котором помимо внутренних блоков можно также использовать усовершенствованные переменные, вычисления и т.д.. Такие файлы компилируются препроцессором в оригинальный CSS, и к тому же сжимаются (минифицируются, убираются переносы и лишние пробелы, размер файла становится меньше). Достаточно интересная область, достойная внимания.
Как повлиять на другие элементы при наведении div
Я думаю, что это очень простой вопрос, но я не уверен, как это можно сделать.
то, что я хочу сделать, это, когда некий div завис, это повлияет на свойства другого div .
например,этот простой пример при наведении курсора мыши #cube изменения background-color но то, что я хочу, это когда я парю над #container , есть.
6 ответов
если куб находится непосредственно внутри контейнера:
если куб находится рядом с (после закрытия контейнера тега) контейнер:
если куб находится где-то внутри контейнера:
если куб является братом контейнера:
в этом конкретном примере вы можете использовать:
это работает только с cube ребенок container . Для более сложных сценариев, вам нужно использовать JavaScript.
использование селектора sibling является общим решением для укладки других элементов при наведении курсора на заданный,но он работает только если другие элементы следуют заданному в DOM. Что мы можем сделать, когда другие элементы должны быть на самом деле до зависшего? Скажем, мы хотим реализовать виджет рейтинга сигнального бара, как показано ниже:
Это можно сделать легко с помощью CSS flexbox модель, установив flex-direction to reverse , Так что элементы отображаются в порядке, противоположном тому, в котором они находятся в DOM. Скриншот выше из такого виджета, реализованного с помощью чистого CSS.
большое спасибо майку и Robertc за их полезные сообщения!
если у вас есть два элемента в HTML, и вы хотите, чтобы :hover над одним и целевым изменением стиля в другом два элемента должны быть непосредственно связаны-родители, дети или братья и сестры. Это означает, что два элемента либо должны находиться один внутри другого, либо оба должны содержаться в одном и том же более крупном элементе.
я хотел отобразить определения в поле на правой стороне браузера в качестве моего пользователи читают через мой сайт и :hover над выделенными терминами; поэтому я не хотел, чтобы элемент «определение» отображался внутри элемента «текст».
я почти сдался и просто добавил javascript на свою страницу,но это будущее! Мы не должны мириться с back sass из CSS и HTML, говорящих нам, где мы должны разместить наши элементы для достижения желаемых эффектов! В конце концов мы пошли на компромисс.
в то время как фактические элементы HTML в файл должен быть вложенным или содержаться в одном элементе, чтобы быть допустимым :hover цели друг к другу, css position атрибут может использоваться для отображения любого элемента, где вы хотите. Я использовал position: fixed для размещения цели my :hover действие, где я хотел его на экране пользователя, независимо от его местоположения в HTML-документе.
в этом примере объектом от элемент внутри #explainBox должен быть #explainBox или в #explainBox . Атрибуты позиции ,назначенные # definitions, заставляют его появляться в нужном месте (вне #explainBox ), хотя он технически расположен в нежелательной позиции в HTML-документе.
я понимаю, что считается плохой формой использовать то же самое #id для более чем одного элемента HTML; однако в этом случае экземпляры #light можно описать самостоятельно в силу своих позиций в уникальном ‘д’. Есть ли причина не повторять id #light в этом случае?