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

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

Как сделать так, чтобы при наведении на один элемент (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 серебряных знака 297 297 бронзовых знаков
ответ дан 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.

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

Как при наведении на один элемент, менять стили другого элемента css?
Здравствуйте! Возник вопрос. Как при наведении на один елемент, изменять стили остальных.

Как имитировать событие hover элемента А при наведении на элемент Б?
<div <div <div .

Установить значение css hover для другого элемента
Ребят, подскажите пожалуйста такую вещь. Например есть структура: <div <div.

Как отредактировать стили элемента при динамичексом изменении css
В общем такая проблема. На сайте когда открываю код элемента, он постоянно обновляется и не дает.

2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525

Сообщение от Strikeby

потому что предназначено для изменения конкретного элемента
без конкретного кода html не понятно что нужно, какой список, какая картинка, как они расположены относительно друг друга?

Strikeby, в редакторе есть куча кнопочек для выделения кода, иначе не читабельно

653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374

Сообщение было отмечено Strikeby как решение

Решение

Можно и без javascript обойтись.

1 2 3 4 5

ul class='list'> li class='item'>img src='http://images5.fanpop.com/image/photos/27300000/Cute-Kitty-Icons-cats-27346477-100-100.png' alt='' />a href='#'>hover/li> li class='item'>img src='https://yt3.ggpht.com/-MTSKoo-DJOI/AAAAAAAAAAI/AAAAAAAAAAA/3aNnHw6CWzQ/s100-c-k-no/photo.jpg' alt='' />a href='#'>hover/li> li class='item'>img src='https://yt3.ggpht.com/-TvvvttTeogQ/AAAAAAAAAAI/AAAAAAAAAAA/5BGRPQszVOs/s100-c-k-no/photo.jpg' alt='' />a href='#'>hover/li> /ul>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.list{ padding:0; } .item{ list-style:none; background:#ccc; margin-bottom:10px; width:200px; } .item img{ border-radius:0; margin-right:0; line-height:0; vertical-align:middle; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition:all 1s; } .item:hover img{ margin-right:10px; border-radius:100%; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

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

У меня проблема с 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

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

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

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

Вот к примеру: наводим на plate 1 , а plate 2-5 изменяются. Так же само и с другими элементами: наводим на plate 3 , изменяются plate 1,2,4,5.

Пытался применить такие параметры, но ничего не вышло:

1 2 3

.plate1:hover ~ .plate2 { color: red; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

 html> head> meta http-equiv="content-type" content="text/html"; charset="utf-8" /> link rel="stylesheet" type="text/css" href="main.css" /> title>Title/title> link href="https://fonts.googleapis.com/css?family=Exo+2:200" rel="stylesheet"> /head> body> div class="all"> div class="plate1">h1>plate 1/h1>/div> div class="plate2">h1>plate 2/h1>/div> div class="plate3">h1>plate 3/h1>/div> div class="plate4">h1>plate 4/h1>/div> div class="plate5">h1>plate 5/h1>/div> /div> /body>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } / HTML5 display-role reset for older browsers / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; font-family: 'Exo 2', sans-serif; background: #1a2128; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .plate { width: 1366px; height: 100%; margin: 0 auto; } .plate1 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-3.jpg"); width: 235px; height: 510px; float: left; margin-top: 40px; margin-left: 76px; } .plate1 h1{ color: #fff; text-align: center; margin-top: 200px; font-size: 32px; } .plate2 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-4.jpg"); width: 235px; height: 510px; float: left; margin-top: 40px; margin-left: 10px; } .plate2 h1{ color: #fff; text-align: center; margin-top: 200px; font-size: 32px; } .plate3 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-5.jpg"); width: 235px; height: 510px; float: left; margin-top: 40px; margin-left: 10px; } .plate3 h1{ color: #fff; text-align: center; margin-top: 200px; font-size: 32px; } .plate4 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-6.jpg"); width: 235px; height: 510px; float: left; margin-top: 40px; margin-left: 10px; } .plate4 h1{ color: #fff; text-align: center; margin-top: 200px; font-size: 32px; } .plate5 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-7.jpg"); width: 235px; height: 510px; float: left; margin-top: 40px; margin-left: 10px; } .plate5 h1{ color: #fff; text-align: center; margin-top: 200px; font-size: 32px; } .plate1:hover ~ .plate2 { display: none; }