Как при наведении на один блок менять другой css

Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?

Мне нужно что бы при наведении на один из li, изменялись стили блоков figures. В начале я хотел сделать по красоте, такой формой:

.what-we-do__list:nth-child(1):hover figures__hover-1 < //какие то стили >

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

Web development(sites, landing pages etc)Building of applications for different platformsSystems for internal stakeholders(finance, sales, logistics)Maintenance of digital assets(app, sites, systems etc)Technical infrastructure providing(hosting, licenses etc)AnalyticsMedia support 

Explore our capabilities

• Вопрос задан более двух лет назад
• 555 просмотров

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

Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
Можно ли это сделать только на css ?
К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали другого цвета. Как записать?
Так не работает:

.block:hover < .block h1 < color: red;>> 

Отслеживать
user207618
задан 1 фев 2014 в 14:05
1,727 4 4 золотых знака 25 25 серебряных знаков 45 45 бронзовых знаков

10 ответов 10

Сортировка: Сброс на вариант по умолчанию

.section < background: #ccc; >.layer < background: #ddd; >.section:hover img < border: 2px solid #333; >.section:hover .layer

 
 
Lorem Ipsum
 

Отслеживать
user207618
ответ дан 1 фев 2014 в 14:09
17.9k 3 3 золотых знака 46 46 серебряных знаков 86 86 бронзовых знаков

Для соседних элементов:

.block1:hover + .block2 h1

Для любых элементов(оба блока должны быть внутри одного элемента):

 .block1:hover ~ .block2 h1

Отслеживать
6,894 2 2 золотых знака 26 26 серебряных знаков 56 56 бронзовых знаков
ответ дан 18 дек 2015 в 18:06
Женя Веденин Женя Веденин
1,304 1 1 золотой знак 17 17 серебряных знаков 33 33 бронзовых знака
И block2 должен идти после block1
18 дек 2015 в 21:17
Добавил сниплет-пример если не возражаете
18 дек 2015 в 21:36
Работает только если менять блоки местами, а это не всегда удобно.
25 авг 2018 в 18:45
так заработает тот что глубже «.block1:hover ~ div .block2 h1 < color: red;>» codepen.io/woodsleaf/pen/PryOjg
8 июл 2019 в 0:30
то есть, внешний блок нереально стилизовать?
15 сен 2019 в 10:08

Заранее говорю, русский язык у меня не самая сильная сторона, заранее извиняюсь за ошибки, если будут 😉 Выше показанные примеры все правильные, но они очень ограничены, при желании изменить другой элемент(который может быть совсем далеко) будет не возможно что-то изменить. Но я могу предложить вариант с JavaScript и он чень простой для усвоения. Главное не бойтесь использовать 🙂

function changeItem() < document.getElementById('one-two').style.width = '200px'; >// функция, которая сработает при наведении. //она означает - выбрать элемент к Id у которого надо что-то изменить. // когда в скобки где написано one-two добавите Id своего элемента function rechangeItem() < document.getElementById('one-two').style.width = '100px'; >// тут всё также. но наобарот. протсес происходящий про отводе курсора.

#one, #two, #one-two < width: 100px; height: 30px; background: red; margin: 30px; >/*Надеюсь, что тут все понятно, заданы елементарные свойства :)*/

Отслеживать
ответ дан 6 сен 2018 в 0:04
Chingiz Mamedov Chingiz Mamedov
323 2 2 серебряных знака 7 7 бронзовых знаков

.s:hover~.d

wow
 
hey

Отслеживать
ответ дан 6 авг 2018 в 6:22
Васильев Мирослав Васильев Мирослав
61 1 1 серебряный знак 1 1 бронзовый знак

.block:hover h1

 
zagolovok
 
zagolovok
 

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 25 фев 2016 в 10:50
41 2 2 бронзовых знака

Если нужно изменить все заголовки в одном блоке, на который навели курсор мыши, то вот так:

.main:hover h2

 
How are you?
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 
Hi
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 
Ok
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 
So-so
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente.
 

Если же нужно изменять стиль элемента, который находится выше элемента с псевдоклассом :hover, то я делал так (размещал изменяемый элемент ниже элемента с псевдоклассом :hover и при помощи flexbox вытягивал его на нужное мне место):

.main < display: flex; flex-direction: column; font: 10px Arial, sans-serif; color: #333; >.one < order: -1; >.two:hover ~ .one

 
How are you?
 
Hi
 
Ok
 
So-so
 

Отслеживать
ответ дан 5 окт 2017 в 9:19
Viktar Daniliuk Viktar Daniliuk
41 1 1 бронзовый знак

div < padding:20px; background:#eee; border:1px solid #ccc; margin:10px; >.anotherdiv < visibility:hidden; opacity:0; transition:all 1s; >.div:hover + .anotherdiv

 
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Отображение скрытых элементов при наведении мыши на гиперссылку или на тег

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

Рассмотрим пример и попробуем разобраться с каждой частью кода.

1.Создайте HTML

• Можно добавить тег в разделе для выравнивания контента по центру (тег не поддерживается в HTML5). Вместо этого можно также использовать CSS свойство text-align со значением “center”.
• Добавьте тег и напишите в нем контент.
• Добавьте тег или для выделения указанной части текста жирным шрифтом, чтобы он был заметен для пользователя.
• Добавьте тег , который указывает разрыв строки.
• Добавьте тег , используемый для вставки гиперссылок на другие страницы, или файлы, местоположения на одной и той же странице, электронные почты, или любой другой URL.
• Создайте тег и напишите в нем контент.

body> h2>W3docsh2> b> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. b> 
 
a href=”https://www.w3docs.com/”>W3docs 
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
  

2. Добавьте CSS

• Выберите цвет для тега с помощью свойства color.
• Используйте свойство display для и задайте значение «none». Это значит, что элемент не будет отображаться.
• Используйте свойство border, чтобы добавить границу к div, и задайте значения свойств border-width, border-style и border-color.
• Используйте свойство cursor со значением «pointer» для тега .
• Используйте смежный одноуровневый селектор. В нашем примере выбраны все элементы , находящиеся сразу после элемента :
• Используйте свойство display и задайте значение «block».
• Задайте цвет текста с помощью свойства color. Можете выбрать любой цвет из инструмента Выбор цвета.
• Задайте font-size для div.

h2 < color: #4287f5; > div < display: none; border: 5px double #b4b8bf; > a< cursor:pointer; > a:hover + div < display: block; color: #4287f5; font-size: 20px; >

Ниже показан результат нашего кода:

Пример

html> html> title>Заголовок документа title> head> style> h2 < color: #4287f5; > div < display: none; border: 5px double #b4b8bf; > a< cursor:pointer; > a:hover + div < display: block; color: #4287f5; font-size: 20px; > style> head> body> center> h2>W3docs h2> b> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. b> br> br> a href=”https://www.w3docs.com/”>W3docs a> div> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> center> body> html>

Рассмотрим другой пример:

Пример

html> html> title>Заголовок документа title> head> style> main< text-align:center; > h2 < color: green; > div < display: none; border: 5px double #b4b8bf; > a< display:block; margin-top:15px; cursor:pointer; > a:hover + div < display: block; color: #4287f5; font-size: 20px; > style> head> body> main> h2>W3docs h2> strong> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. strong> a href=”https://www.w3docs.com/”>W3docs a> div> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> main> body> html>

Пример

html> html> title>Заголовок документа title> head> style> div< text-align:center; > h2 < color: green; > .hide < display: none; border: 5px double #b4b8bf; > a< display:block; margin-top:15px; cursor:pointer; text-decoration:none; > a:hover + div < display: block; color: #4287f5; font-size: 20px; > style> head> body> div> h2>W3docs h2> strong> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. strong> a href=”https://www.w3docs.com/”>W3docs a> div class="hide"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> div> body> html>

В этом примере мы использовали тег внутри другого и добавили для него класс “hide”. Здесь получается одинаковый результат.

Рассмотрим другой пример:

Пример

html> html> title>Заголовок документа title> head> style> div< text-align:center; > h2 < color: #4287f5; > .hide < display: none; border: 5px double #b4b8bf; > a< display:block; margin-top:15px; cursor:pointer; text-decoration:none; > a:hover + span < display: block; color: #4287f5; font-size: 20px; > style> head> body> div> h2>W3docs h2> strong> Наведите мышь на элемент внизу, чтобы увидеть div-элемент. strong> a href=”https://www.w3docs.com/”>W3docs a> span class="hide"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. span> div> body> html>

В этом примере мы использовали тег a вместе с классом “hide”. Это пустой контейнер. Тег объединяет элементы уровня блока, а объединяет строчные элементы.

Наложение объектов

Очень важный момент, состоит в том, что z-index работает корректно только для элементов на одном уровне и с одинаковым набором свойств. Например элементы position:static и position:absolute имеют разную иерархию z-index Отдельные иерархии у элементов с float и opacity

Хак: Как переместить вложенный блок под родительский? По умолчанию вложенный блок всегда над. Но это можно изменить

.wrapper < position: relative; > .child < position: relative; z-index: -1; > 

Обратите внимание, что для родителя z-index в этой ситуации ставить не нужно!

transition для z-index

Для z-index работает плавное изменение с помощью transition. Это можно использовать для появления элементов с разной скоростью.

opacity — задает полупрозрачность блока. 0 — полностью прозрачный блок, 1 — не меняет прозрачность блока, то есть непрозрачный блок остается непрозрачным.

div < opacity: 0.5; > 

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

То есть, если у нас два блока, один из которых вложен в другой, например так

div class="parent"> div class="child"> div> div> 

и если мы зададим стили следующим образом

.parent < opacity:0.5; width:200px; height:200px; background-color:darkolivegreen; > .child < opacity:1; width:200px; height:200px; background-color:orange; > 

То у вложенного блока opacity всё-равно будет 0.5, то есть opacity вложенных блоков перемножаются.

Но если opacity больше единицы, то оно приводится к единице. То есть пример ниже будет аналогичен по внешнему виду примеру выше.

.parent < opacity:0.5; width:200px; height:200px; background-color:darkolivegreen; > .child < opacity:2; width:200px; height:200px; background-color:orange; > 

visibility — определяет будет ли показываться элемент visible — элемент виден hidden — элемент скрыт

Отличие visibility:hidden от display:none в том, что блок будет попрежнему занимать место, хотя мы его не будем видеть. При display:none блок просто исчезнет со страницы

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

По умолчанию у объектов стоит значение visible

hidden — скроет все выступающие элементы
scroll — добавит в блок скроллинг. Не самое популярное решение, так как скроллинг уменшит область под контент.

div < width: 150px; height: 150px; overflow: scroll; > 

Хак: Если у Вас margin-top вложенного блока переходит на родительский, то overflow:hidden у родительского блока, блокирует выход margin’a за пределы блока, и всё начинает работать так, как Вы этого ожидаете.

Хак: Если родительский блок «не замечает» вложенные float элементы, например высота height:auto у родительского элемента преобразуется в 0, то overflow:hidden у родительского блока также решает эту проблему.

Оверлеи

Оверлей — это блок, который накладывается на весь экран. Все знакомы с оверлеями по раздражающему затемнению экрана, на котором выводится рекламный банер.

Рассмотрим один из способом создания оверлея

.overlay < width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; top:0px; left:0px; z-index:10; > 

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

 height:100%; width:100%; 

Фоновый цвет делаем черным, но полупрозрачным.

 background-color:rgba(0,0,0,0.5) 

Поскольку мы хотим, чтобы затемнение было в любом месте экрана, даже если пользователь проскролил вниз, выставляем позиционирование фиксированным.

 position:fixed; top:0px; left:0px; 

Наш оверлей всегда должен быть поверх всего остального, поэтому выставляем z-index большим.

 z-index:10 

Ромб с фоновой картинкой

Поворачиваем квадрат с помощью трансформации на 45 градусов.

Вложенную картинку поворачиваем на -45 градусов

Фильтры

Полезное чтиво:

1. Четыре техники создания оверлеев http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Практика:

1. Два блока пересекаются. Сделать два варианта наложения одного блока на другой
2. Создание блока с полупрозрачным фоном и непрозрачным текстом. Фон — фотография
3. Создать оверлей поверх сайта
4. При наведении на блок, на нем последовательно появляются блоки(transition для z-index)
5. Наводим на блок и из него плавно выезжает меню
6. При наведении на гиперссылку, вокруг нее возникает выделение. Выделение должно собираться из окружающегося пространства. Пример http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
7. Верстка сайта с контентом в виде ромбиков (используем трансформации и position)
8. Сделать слайдер. Картинки меняются при наведении на навигационные кружочки
9. При наведении мышки на блок, фон, на котором он стоит размывается.
10. Есть фотография цветного товара, на однородном сером фоне. И есть цветные квадратики. При наведении на квадратик, товар окрашивается в цвет квадрата.
11. К низу сайта добавлен ярлык. При наведении на ярлык, всплывают пункты меню(подобно интерфейсу на мак)

results matching » «

No results matching » «