С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.65/40: Рейтинг темы: голосов - 40, средняя оценка - 4.65
0 / 0 / 0
Регистрация: 12.07.2018
Сообщений: 1

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

12.07.2018, 15:48. Показов 7946. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте! Возник вопрос...

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

Вот к примеру: наводим на 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;
}
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
12.07.2018, 15:48
Ответы с готовыми решениями:

Как при наведении на один элемент (hover) менять стили другого элемента css?
Есть вертикальный блок навигации, список, в каждом &lt;li&gt; лежит картинка и заголовок. Цель: при наведении мышки на элемент списка -&gt;...

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

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

5
Эксперт JSЭксперт HTML/CSS
 Аватар для 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
7 / 7 / 5
Регистрация: 07.06.2018
Сообщений: 117
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 эфектов
0
 Аватар для Omion
190 / 55 / 12
Регистрация: 19.05.2015
Сообщений: 352
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 всё подписано, но если нужна помощь могу помочь разобраться. Это вечером по мск
0
7 / 7 / 5
Регистрация: 07.06.2018
Сообщений: 117
18.07.2018, 14:41
Цитата Сообщение от Omion Посмотреть сообщение
я сохранял страницу и выпиливал всё лишнее. В css всё подписано, но если нужна помощь могу помочь разобраться. Это вечером по мск
ок. будет интересно. я насчитал там 15 шт эфектов на одной странице.
было б неплохо сунуть всё в одно место. так как там много всего. а потом пользовать по надобности.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
18.07.2018, 14:41
Помогаю со студенческими работами здесь

Transition при наведение менять цвет другого элемента
Как сделать так чтобы при на наведение на элемент менялся цвет другого элемента transition JS советовать не надо &lt;div...

можно ли менять id элемента при наведении?
Здравствуйте. Такая проблема. Есть большой скрипт, который ссылается на элемент с ИДом. Но мне надо было, чтобы любой элемент можно...

Записать два элемента одного массива, как один элемент другого
Здравствуйте) есть такое задание: нужно составить таблицу истинности(дискретная математика). И в процессе выполнения нужно записать...

Менять цвет второго элемента при наведении на первый и наоборот
Задача: есть два блока div1 - black, div2 - gray. Если наводим на div1 , то div2 становится голубым, eсли наводим на div2 , то div1...

Как имитировать событие hover элемента А при наведении на элемент Б?
&lt;div class=&quot;plans-list&quot;&gt; &lt;div class=&quot;list-block&quot;&gt; &lt;div class=&quot;block-title&quot;&gt; &lt;div class=&quot;block-title-primary&quot;&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru