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

@Apollo547 · Регистрация: 12.07.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте! Возник вопрос...

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

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

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

CSS
1
2
3
.plate1:hover ~ .plate2 {
    color: red;
}

Мой код: codepen.io

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<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>

CSS
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;
}

@mrtoxas · 12.07.2018, 15:59

Мы можем повлиять только на элементы, которые находятся ниже в html. При наведении на plate 3 можно повлиять только на plate 3,4,5.
Или посредством js. На CSS такое можно сделать только дикими костылями.

@Omion · 13.07.2018, 14:07

Глянь сюда. Я думаю ты найдешь себе по душе что нибудь.
Можно скачать пример и по разбираться в коде. В своё время так и сделал. Правда втопил пару дней)))

Добавлено через 55 секунд
mrtoxas, привеееет

@winwin22 · 17.07.2018, 22:49

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

втопил пару дней)))

на одной стр. сможешь показать результат разборки?
1 примера.?

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

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

используй в теге например так

HTML5
1
<script>function namefunction_js(){...}</script><a href="" onmouseover="namefunction_js();">

там где троеточие пиши что и где измерить подкрасить и пр. ,но помни что ява скрип не видит тире как css
там пиши слитно.

Добавлено через 5 минут

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

Можно скачать пример

Ох апупеть, да там вся библиотека...

HTML5
1
<link rel="stylesheet" type="text/css" href="css/set1.css" />

Добавлено через 8 минут
там 30 эфектов

@Omion · 18.07.2018, 09:45

winwin22,

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

на одной стр. сможешь показать результат разборки?

если только вечером

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

Сообщение от Apollo547
Как при наведении на один елемент, изменять стили остальных элементов?
используй в теге например так
HTML5Выделить код
1
<script>function namefunction_js(){...}</script><a href="" onmouseover="namefunction_js();">
там где троеточие пиши что и где измерить подкрасить и пр. ,но помни что ява скрип не видит тире как css
там пиши слитно.

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

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

Ох апупеть, да там вся библиотека...

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

@winwin22 · 18.07.2018, 14:41

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

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

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

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	12.07.2018, 15:59
	Мы можем повлиять только на элементы, которые находятся ниже в html. При наведении на plate 3 можно повлиять только на plate 3,4,5. Или посредством js. На CSS такое можно сделать только дикими костылями. 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	13.07.2018, 14:07
	Глянь сюда. Я думаю ты найдешь себе по душе что нибудь. Можно скачать пример и по разбираться в коде. В своё время так и сделал. Правда втопил пару дней))) Добавлено через 55 секунд mrtoxas, привеееет 0