Изменить родительский класс при наведении на дочерний

@Рафик · Регистрация: 25.06.2013

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

Всем привет. Битый час бьюсь с проблемой, решил спросить у вас.

Имеется див, шириной 100%.
Поверх него (внутри) висят 5 дивов, каждый шириной 20%, что в сумме закрывает 100% родительского.
Как мне изменить родительский класс, при наведении на дочерний? Например его фон.

Пример кода:
HTML

HTML5
1
2
3
4
5
6
7
<div class="image_grid">
  <div class="img1">1</div>
  <div class="img2">2</div>
  <div class="img3">3</div>
  <div class="img4">4</div>
  <div class="img5">5</div>
</div>

CSS

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
.image_grid {
    background: blue;    
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
}
.img1 {
    left: 0;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    visibility: hidden;
}
.img2 {
    left: 20%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    visibility: hidden;
}
.img3 {
    left: 40%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    visibility: hidden;
}
.img4 {
    left: 60%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    visibility: hidden;
}
.img5 {
    left: 80%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red; 
    position: absolute;
    visibility: hidden;
}
.img1:hover .image_grid {
   background: green;
}
.img2:hover + .image_grid {
   background: yellow;
}
.img3:hover  ~ .image_grid {
   background: cyan;
}
.img4:hover > .image_grid {
   background: magenta;
}
.img5:hover .image_grid {
   background: green;
}

Код на codepen:
https://codepen.io/Heavenanvil/pen/QqQGzx

Qwerty_Wasd · 06.10.2017, 19:49

Рафик, на чистом CSS изменить стиль родителя при наведении на дочерний элемент не получится. Есть простенький скрипт с использованием JQuery.
Песочница

HTML5
1
2
3
4
5
6
7
<div class="image_grid">
  <div class="img1">1</div>
  <div class="img2">2</div>
  <div class="img3">3</div>
  <div class="img4">4</div>
  <div class="img5">5</div>
</div>

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
.image_grid {
    background: blue;    
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
}
.img1 {
    left: 0;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    opacity:0;
}
.img2 {
    left: 20%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    opacity:0;
}
.img3 {
    left: 40%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    opacity:0;
}
.img4 {
    left: 60%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red;
    position: absolute;
    opacity:0;
}
.img5 {
    left: 80%;
    top: 0;
    width: 20%;
    height: 100%;
    background: red; 
    position: absolute;
    opacity:0;
}
.is-hover1 { 
   background: green;
}
.is-hover2 {
   background: yellow;
}
.is-hover3 {
   background: cyan;
}
.is-hover4 {
   background: magenta;
}

JavaScript
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
$('.img1').on('mouseover', function(){
  $(this).parent().addClass('is-hover1');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover1');
})
$('.img2').on('mouseover', function(){
  $(this).parent().addClass('is-hover2');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover2');
})
$('.img3').on('mouseover', function(){
  $(this).parent().addClass('is-hover3');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover3');
})
$('.img4').on('mouseover', function(){
  $(this).parent().addClass('is-hover4');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover4');
})
$('.img5').on('mouseover', function(){
  $(this).parent().addClass('is-hover1');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover1');
})

@AlexZaw · 06.10.2017, 20:01

Можно и без jquery для такой простенькой задачи, только visibiliti:hidden все-равно придется заменить на

opacity:0

JavaScript
1
2
3
4
5
6
document.querySelector(".img1").onmouseover=function(){
  document.querySelector(".image_grid").style.backgroundColor = "red";
}
document.querySelector(".img1").onmouseout=function(){
  document.querySelector(".image_grid").style.backgroundColor = "blue";
}

ну и далее по аналогии

@Рафик · 07.10.2017, 12:20 **[ТС]**

Не хотелось бы для такой простой функции подключать отдельно jQuery.
Хотелось бы вообще на чистом css.
Вот [del], [del] и [del] люди спрашивали о подобном, им предлагали варианты на CSS, но почему-то у меня так не работает.

Вообще, может я не в ту сторону копаю. Мне нужно, чтобы фоновое изображение дива менялось, пока я провожу курсором по горизонтали этого дива. Всего 5 сменных изображений, и одно дефолтное (когда убираешь курсор).
То есть по сути они и не обязательно должны быть дочерними, можно просто соседними с наложением друг на друга.
Однако явно прописывать пути до изображений в css нельзя, поскольку они будут генерироваться на php, поэтому приходится их все сразу подгружать в коде сайта, делать невидимыми и по мере наведения курсора переключать видимость.
Может у вас есть идеи, как это сделать получше, сильно не загромождая код. [del]

@mrtoxas · 07.10.2017, 13:11

Родительский блок можно изменить костылями:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<button id="flag1"></button>
<button id="flag2"></button>
<button id="flag3"></button>
<button id="flag4"></button>
<button id="flag5"></button>
<div class="image_grid">
  <label for="flag1">1</label>
  <label for="flag2">2</label>
  <label for="flag3">3</label>
  <label for="flag4">4</label>
  <label for="flag5">5</label>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html,body{
  height:100%;
}
[id^=flag]{
  position: fixed;
  visibility: hidden;
  left:-500px;
}
.image_grid{
  width:100%;
  height: 100%;
}
label{
  display: inline-block;
  padding:10px;
  border:1px solid black;
  cursor:pointer;
}
#flag1:hover ~ .image_grid{background-color:red;}
#flag2:hover ~ .image_grid{background-color:blue;}
#flag3:hover ~ .image_grid{background-color:green;}
#flag4:hover ~ .image_grid{background-color:yellow;}
#flag5:hover ~ .image_grid{background-color:lime;}

https://codepen.io/anon/pen/NayOgg

@AlexZaw · 07.10.2017, 13:32

можно так попробовать, только картинки прикрутить как то надо:
https://jsfiddle.net/AlexZaw/s59rsar9/

HTML5
1
2
3
4
5
6
7
<div class="wrapper">
  <div class="inner inner1"></div>
  <div class="inner inner2"></div>
   <div class="inner inner3"></div>
    <div class="inner inner4"></div>
    <div class="outer"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.wrapper{position: relative;}
.outer{width: 420px;height: 100px;background-color: #fff;position: absolute;
top:0;left:0;z-index: -1;}
.inner{display:inline-block}
.inner1{width: 100px;height: 100px;background-color: #000;opacity:0}
 .inner1:hover~.outer{background-color: #f00;}
.inner2{width: 100px;height: 100px;background-color: #000;opacity:0}
 .inner2:hover~.outer{background-color: #0f0;}
 .inner3{width: 100px;height: 100px;background-color: #000;opacity:0}
 .inner3:hover~.outer{background-color: #00f;}
 .inner4{width: 100px;height: 100px;background-color: #000;opacity:0}
 .inner4:hover~.outer{background-color: #ff0;}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Рафик 2 / 2 / 1 Регистрация: 25.06.2013 Сообщений: 308
	07.10.2017, 12:20 [ТС]
	Не хотелось бы для такой простой функции подключать отдельно jQuery. Хотелось бы вообще на чистом css. Вот [del], [del] и [del] люди спрашивали о подобном, им предлагали варианты на CSS, но почему-то у меня так не работает. Вообще, может я не в ту сторону копаю. Мне нужно, чтобы фоновое изображение дива менялось, пока я провожу курсором по горизонтали этого дива. Всего 5 сменных изображений, и одно дефолтное (когда убираешь курсор). То есть по сути они и не обязательно должны быть дочерними, можно просто соседними с наложением друг на друга. Однако явно прописывать пути до изображений в css нельзя, поскольку они будут генерироваться на php, поэтому приходится их все сразу подгружать в коде сайта, делать невидимыми и по мере наведения курсора переключать видимость. Может у вас есть идеи, как это сделать получше, сильно не загромождая код. [del] 0

Изменить родительский класс при наведении на дочерний

Решение