На одном работает, а на другом нет

@IDarknessI · Регистрация: 12.04.2017

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

Есть проблема.Дело в том, что когда я навожу на круг курсор, то круг1 двигается, а круг2 нет, но по идее он должен двигаться.Пересматривал код раз 20, но не смог найти в чем проблема.

PHP
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
  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .circle {
            margin-left: 100px;
            margin-top: 100px;
            height: 100px;
            width: 100px;
            border-radius: 100px;
            background: skyblue;
            position: fixed;
        }
        .circle:hover + .circle1 {
            margin-left: 300px;
            transition: 0.5s;
        } 
        .circle:hover + .circle2 {
            margin-left: 450px;
            transition: 0.5s;
        } 
        .circle1{
            z-index: -1;
           margin-left: 110px;
           margin-top: 100px;
           position: fixed;
           height: 70px;
           width: 70px;
           background: whitesmoke;
           box-shadow: 0 3px 2px 1px gray;
           border-radius: 70px;
           transition: 0.5s;
        }
        .circle2{
            z-index: -1;
           margin-left: 110px;
           margin-top: 100px;
           position: fixed;
           height: 70px;
           width: 70px;
           background: whitesmoke;
           box-shadow: 0 3px 2px 1px gray;
           border-radius: 70px;
           transition: 0.5s;
        }
    </style>
</head>
<body>
    <!-- 300 450 600 750 -->
    <div class="circle"></div>
    <div class='circle1'>1</div>
    <div class='circle2'>2</div>
</body>
</html>

@Fedor92 · 16.03.2018, 19:33

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

по идее он должен двигаться

По чьей идее?

HTML5
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
  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .circle {
            margin-left: 100px;
            margin-top: 100px;
            height: 100px;
            width: 100px;
            border-radius: 100px;
            background: skyblue;
            position: fixed;
        }
        .circle:hover + .circle1 {
            margin-left: 300px;
            transition: 0.5s;
        } 
        .circle:hover ~ .circle2 {
            margin-left: 450px;
            transition: 0.5s;
        } 
        .circle1{
            z-index: -1;
           margin-left: 110px;
           margin-top: 100px;
           position: fixed;
           height: 70px;
           width: 70px;
           background: whitesmoke;
           box-shadow: 0 3px 2px 1px gray;
           border-radius: 70px;
           transition: 0.5s;
        }
        .circle2{
            z-index: -1;
           margin-left: 110px;
           margin-top: 100px;
           position: fixed;
           height: 70px;
           width: 70px;
           background: whitesmoke;
           box-shadow: 0 3px 2px 1px gray;
           border-radius: 70px;
           transition: 0.5s;
        }
    </style>
</head>
<body>
    <!-- 300 450 600 750 -->
    <div class="circle"></div>
    <div class='circle1'>1</div>
    <div class='circle2'>2</div>
</body>
</html>

@IDarknessI · 16.03.2018, 20:49 **[ТС]**

В Гугле смотрел.
Почему мой код не работает?

@AlexZaw · 16.03.2018, 21:07

Потому что такая .circle:hover + .circle1 выборка селекторов означает что стиль применяется к элементу .circle1 , но только в том случае, если он является соседним для элемента .circle и следует сразу после него.
А такая .circle:hover ~ .circle2 означает что правила применяются ко всем близлежащим элементам .circle2

Новые блоги и статьи Все статьи Все блоги /
Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .	PowerShell и онлайн сервисы. Валюта (floatrates.com руб.) iNNOKENTIY21 11.11.2025 PowerShell функция floatrates-rub Примеры вызова: # Указанная валюта 'EUR' floatrates-rub -Code 'EUR' # Список имеющихся кодов валют floatrates-rub -Available function floatrates-rub {	PowerShell и онлайн сервисы. Погода (RP5.ru) iNNOKENTIY21 11.11.2025 PowerShell функция Get-WeatherRP5rss для получения погоды с сервиса RP5 Примеры вызова Get-WeatherRP5rss с указанием id 5484 — Москва (восток, Измайлово) и переносом строки:. . .	PowerShell и онлайн сервисы. Погода (wttr) iNNOKENTIY21 11.11.2025 PowerShell Функция для получения погоды с сервиса wttr Примеры вызова: Погода в городе Омск с прогнозом на день, можно изменить прогноз на более дней, для этого надо поменять запрос:. . .
PowerShell и онлайн сервисы. Валюта (ЦБР) iNNOKENTIY21 11.11.2025 # Получение курса валют function cbr (] $Valutes = @('USD', 'EUR', 'CNY')) { $url = 'https:/ / www. cbr-xml-daily. ru/ daily_json. js' $data = Invoke-RestMethod -Uri $url $esc = 27 . . .	И решил я переделать этот ноут в машину для распределенных вычислений Programma_Boinc 09.11.2025 И решил я переделать этот ноут в машину для распределенных вычислений Всем привет. А вот мой компьютер, переделанный из ноутбука. Был у меня ноут асус 2011 года. Со временем корпус превратился. . .	Мысли в слух kumehtar 07.11.2025 Заметил среди людей, что по-настоящему верная дружба бывает между теми, с кем нечего делить.	Новая зверюга volvo 07.11.2025 Подарок на Хеллоуин, и теперь у нас кроме Tuxedo Cat есть еще и щенок далматинца: Хочу еще Симбу взять, очень нравится. . .	Инференс ML моделей в Java: TensorFlow, DL4J и DJL Javaican 05.11.2025 Python захватил мир машинного обучения - это факт. Но когда дело доходит до продакшена, ситуация не так однозначна. Помню проект в крупном банке три года назад: команда data science натренировала. . .

@IDarknessI 2 / 2 / 0 Регистрация: 12.04.2017 Сообщений: 99
	16.03.2018, 20:49 [ТС]
	В Гугле смотрел. Почему мой код не работает? 0

@AlexZaw Модератор 2377 / 1738 / 676 Регистрация: 07.08.2016 Сообщений: 4,089
	16.03.2018, 21:07
	Потому что такая `.circle:hover + .circle1` выборка селекторов означает что стиль применяется к элементу .circle1 , но только в том случае, если он является соседним для элемента .circle и следует сразу после него. А такая `.circle:hover ~ .circle2` означает что правила применяются ко всем близлежащим элементам .circle2 1

Опции темы

На одном работает, а на другом нет

Решение