Изменение цвета фона одного объекта при наведении на другой

@Нектос · Регистрация: 26.04.2013

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

Доброго времени суток. Столкнулся с проблемой которую никак не получается решить.
Создал навигацию с выпадающими меню, в котором изменяется фон выбранного раздела навигации, но при переходе курсора на выпадающее меню — фон элемента навигации изменяется на значение без hover, а мне надо что бы оно оставалось с тем значением которое у него становится при наведении курсора.

Собственно наглядно предоставляю коды. Это вот HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <div id="catalogue">
            <ul>
                <li class="c1"><a href="#" style="background-position:40px 15px;">одежда <p>для мужчин</p></a></li>
                <li><a href="#" style="background-position:-75px 15px;">одежда <p>для женщин</p></a></li>
                <li><a href="#" style="background-position:-195px 15px;">товары <p>для детей</p></a></li>
                <li><a href="#" style="background-position:-315px 15px;">красота <p>и здоровье</p></a></li>
                <li><a href="#" style="background-position:-795px 15px;">аксессуары<p style="opacity:0;">a</p></a></li>
                <li><a href="#" style="background-position:-555px 15px;">парфюмерия<p style="opacity:0;">a</p></a></li>
                <li><a href="#" style="background-position:-675px 15px;">атрибутика<p style="opacity:0;">a</p></a></li>
                <li><a href="#" style="background-position:-435px 15px;">книги<p style="opacity:0;">a</p></a></li>
                <div id="c1">
                    <a href="#">Головные уборы</a>
                </div>
            </ul>
        </div>

И соответственно CSS:

CSS
1
2
3
4
5
6
7
8
9
10
#catalogue {padding-top:5px;background-color:rgba(255,255,255,0.25);border-top:1px solid rgba(255,255,255,0.5);border-left:1px solid rgba(255,255,255,0.15);border-right:1px solid rgba(255,255,255,0.15);}
#catalogue ul {width:100%;height:100px;display:block;text-align:center;list-style-type:none;padding:0;margin:0;}
#catalogue li {color:black;background:url(../images/catalogue-bg.png) repeat-x;display:inline-block;text-transform:uppercase;line-height:1.1;width:100px;height:100px;padding:0;margin:0 10px;}
#catalogue li a {display:block;background:url(../images/catalogue-icons.png) no-repeat;height:33px;padding-top:67px;margin:0;color:black;text-decoration:none;transition:all 0.6s ease;-moz-transition:all 0.6s ease;-webkit-transition:all 0.6s ease;}
#catalogue li a:hover {background-color:#e64646;}
#catalogue li a p {margin:0;padding:0;}
 
#catalogue #c1 {opacity:0;z-index:-1;position:relative;top:0;left:15px;width:223px;height:200px;background-color:#e64646;transition:all 0.6s ease;-moz-transition:all 0.6s ease;-webkit-transition:all 0.6s ease;}
#catalogue #c1:hover {z-index:3;opacity:1;}
#catalogue .c1:hover ~ #c1 {z-index:3;opacity:1;}

Вот из этого всего мне нужно что бы когда я наводил курсор на

CSS
1
#c1

, то у

CSS
1
.c1 a

цвет оставался таким:

CSS
1
{background-color:#e64646;}

Ну соответственно пробовал сделать так:

CSS
1
#catalogue #c1:hover ~ .c1 a {background-color:#e64646;}

, но ничего не получается. Вообщем не знаю как решить данную проблему, помогите пожалуйста. Буду очень признателен

Добавлено через 22 минуты
Обнаружил подобную тему и позаимствовал там скрипт, немного изменив его (я в них вообще не разбираюсь если что):

Java
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $('#c1').hover(
        function(){
            $('.c1 a').css('background-color','#e64646');
        },
        function(){
            $('.c1 a').css('background','url(images/catalogue-icons.png) no-repeat 40px 15px');
        }
    );
});

В итоге вроде работает и при отведении курсора от #c1 возвращает исходный вид фона объекта. Но проблема в том, что при повторном наведении ничего не работает.

Добавлено через 14 часов 5 минут
Никто не поможет?

@SaNeK_71 · 06.07.2013, 14:34

Нектос, если я правильно Вас понял, то Вам нужно, чтобы при наведении на второй уровень меню, первый уровень меню на выбранном элементе горел фон?

@Нектос · 06.07.2013, 14:37 **[ТС]**

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

Нектос, если я правильно Вас понял, то Вам нужно, чтобы при наведении на второй уровень меню, первый уровень меню на выбранном элементе горел фон?

Да, всё верно!

@SaNeK_71 · 06.07.2013, 14:38

Нектос, сейчас что-нибудь придумаю, но Вы не правильно делали, сразу Вам говорю

@Нектос · 06.07.2013, 14:40 **[ТС]**

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

Нектос, сейчас что-нибудь придумаю, но Вы не правильно делали, сразу Вам говорю

По всей видимости. Я новичок в верстке, так что это не удивительно.
Буду очень признателен, если поможете решить проблему.

@SaNeK_71 · 06.07.2013, 15:00

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="catalogue">
    <ul>
        <li>
            <a href="">Одежда для мужчин</a>
            <ul>
                <li><a href="">Брюки</a></li>
                <li><a href="">Джинсы</a></li>
                <li><a href="">Футболка</a></li>
                <li><a href="">Майка</a></li>
                <li><a href="">Кеды</a></li>
            </ul>
        </li>
        <li><a href="">Одежда для женщин</a></li>
        <li><a href="">Товары для детей</a></li>
        <li><a href="">Красота и здоровье</a></li>
        <li><a href="">Аксессуары</a></li>
        <li>
            <a href="">Парфюмерия</a>
            <ul>
                <li><a href="">Брюки</a></li>
                <li><a href="">Джинсы</a></li>
                <li><a href="">Футболка</a></li>
                <li><a href="">Майка</a></li>
                <li><a href="">Кеды</a></li>
            </ul>
        </li>
        <li><a href="">Атрибутика</a></li>
        <li><a href="">Книги</a></li>
    </ul>
</div>
</body>
</html>

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
#catalogue {
padding-top: 5px;
background-color: rgba(255, 255, 255, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
 
#catalogue ul {
padding: 0;
margin: 0;
}
 
#catalogue ul li {
padding: 0;
margin: 0;
float: left;
list-style: none none;
}
 
#catalogue ul li a {
display: block;
padding: 5px;
margin: 0;
color: black;
text-decoration: none;
transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}
 
#catalogue>ul>li:hover>a{
background-color: #e64646;
}
 
#catalogue li a:hover {
background-color: #e64646;
}
#catalogue ul li ul{
display: none;
}
#catalogue ul li:hover ul{
display: block;
}
#catalogue ul li ul li{
float: none;
}

Добавлено через 1 минуту
Если есть какие-то вопросы - задавайте, помогу.

@Нектос · 06.07.2013, 15:06 **[ТС]**

Спасибо! Сейчас буду пробовать.
А между прочим, не могли бы вы мне объяснить вообще суть этих переменных «~», «>», «+», а то сколько не лазил по шпаргалкам для верстальщиков и сайтам посвященным ксс, ничего не встречал такого. Может плохо искал

@SaNeK_71 · 06.07.2013, 15:11

Линк для примера

Добавлено через 4 минуты
Нектос, вот здесь вроде бы как понятно расписано про селекторы

@Нектос · 06.07.2013, 15:49 **[ТС]**

SaNeK_71, за ссылку спасибо.

Не получается у меня вашим методом. Теперь блок выпадающего окна мешает остальным элементам меню и сдвигает их с нужного места.

@SaNeK_71 · 06.07.2013, 15:50

Нектос, показывайте, что и как. Скрины или линк.

@Нектос · 06.07.2013, 15:56 **[ТС]**

SaNeK_71, http://jsfiddle.net/6yDMt/1/

Изменение цвета фона одного объекта при наведении на другой

@SaNeK_71 · 06.07.2013, 16:04

Нектос, что-то я вообще не увидел своего кода в Ваших исходниках...

@Нектос · 06.07.2013, 16:13 **[ТС]**

SaNeK_71, ну я последовательно пытался сделать то, что прислали.
Т.е. вставить дополнительный список рядом с ссылкой в другой список.
Но этот список сдвигает элементы у родительского списка.
Селектор display:none то помогает, но при hover'е (display:block) объекты всё равно смещаются.

@SaNeK_71 · 06.07.2013, 16:14

Нектос, пришлите все то, что было с моим кодом, когда у Вас что-то сдвигало...

@Нектос · 06.07.2013, 18:00 **[ТС]**

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

Нектос, показывайте, что и как. Скрины или линк.

Ну вот: http://jsfiddle.net/7HLTR/

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
        <div id="catalogue">
            <ul>
                <li>
                    <a href="#"><span class="link-icon l1"></span><span class="link-name">одежда <p>для мужчин</p></span></a>
                        <ul>
                            <li>asd</li>
                            <li>asd</li>
                            <li>asd</li>
                            <li>asd</li>
                        </ul>
                </li>
                <li>
                    <a href="#"><span class="link-icon l2"></span><span class="link-name">одежда <p>для женщин</p></span></a>
                </li>
                <li>
                    <a href="#"><span class="link-icon l3"></span><span class="link-name">товары <p>для детей</p></span></a>
                </li>
                <li>
                    <a href="#"><span class="link-icon l4"></span><span class="link-name">красота <p>и здоровье</p></span></a>
                </li>
                <li>
                    <a href="#"><span class="link-icon l5"></span><span class="link-name">парфюмерия</span></a>
                </li>
                <li>
                    <a href="#"><span class="link-icon l6"></span><span class="link-name">атрибутика</span></a>
                </li>
                <li>
                    <a href="#"><span class="link-icon l7"></span><span class="link-name">аксессуары</span></a>
                </li>
                <li>
                    <a href="#"><span class="link-icon l8"></span><span class="link-name">книги</span></a>
                </li>
            </ul>
        </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#catalogue {width:100%;height:105px;margin:0;padding:0;background-color:rgba(255,255,255,0.25);border-top:1px solid rgba(255,255,255,0.5);border-left:1px solid rgba(255,255,255,0.15);border-right:1px solid rgba(255,255,255,0.15);}
#catalogue ul {padding:0;margin:0;list-style-type:none;}
#catalogue ul li ul {display:none;width:214px;height:245px;background-color:#e64646;position:relative;top:105px;left:18px;list-style-type:none;padding:0;margin:0;}
#catalogue ul li ul li {margin:0;padding:0;display:block;outline:1px solid blue;}
#catalogue a {display:block;float:left;height:100px;width:89px;background:url(../images/catalogue-bg-def.png) repeat-x;text-decoration:none;position:relative;top:5px;margin:0 18px;transition:all 0.4s ease;-moz-transition:all 0.4s ease;-webkit-transition:all 0.4s ease;}
#catalogue p {margin:0;padding:0;}
#catalogue a:hover {background:url(../images/catalogue-bg-hov.png) repeat-x;}
#catalogue a .link-icon {display:block;height:70px;width:100%;background:url(../images/catalogue-icons.png) no-repeat;}
#catalogue a .link-name {display:block;height:30px;width:100%;text-align:center;text-transform:uppercase;color:black;line-height:1.2;}
#catalogue a .l1 {background-position:35px 15px;} 
#catalogue a .l2 {background-position:-83px 15px;} 
#catalogue a .l3 {background-position:-200px 15px;} 
#catalogue a .l4 {background-position:-320px 15px;}
#catalogue a .l5 {background-position:-560px 15px;} 
#catalogue a .l6 {background-position:-680px 15px;} 
#catalogue a .l7 {background-position:-800px 15px;} 
#catalogue a .l8 {background-position:-443px 15px;}
#catalogue ul li:hover ul {display:block;}
#catalogue>ul>li:hover>a {background:url(../images/catalogue-bg-hov.png) repeat-x;}

Вроде ничего не упустил. Но при наведении сдвигает.
Скрин:

Добавлено через 1 час 27 минут
Всё справился и всё работает как швейцарские часы

Огромное спасибо за помощь SaNeK_71!

@SaNeK_71 · 06.07.2013, 18:55

Нектос, получилосЬ после последних поправок?

@Нектос · 07.07.2013, 22:09 **[ТС]**

SaNeK_71, да

Большое спасибо!

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 14:34
	Нектос, если я правильно Вас понял, то Вам нужно, чтобы при наведении на второй уровень меню, первый уровень меню на выбранном элементе горел фон? 0

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 14:38
	Нектос, сейчас что-нибудь придумаю, но Вы не правильно делали, сразу Вам говорю 1

@Нектос 2 / 2 / 0 Регистрация: 26.04.2013 Сообщений: 18
	06.07.2013, 15:06 [ТС]
	Спасибо! Сейчас буду пробовать. А между прочим, не могли бы вы мне объяснить вообще суть этих переменных «~», «>», «+», а то сколько не лазил по шпаргалкам для верстальщиков и сайтам посвященным ксс, ничего не встречал такого. Может плохо искал 0

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 15:11
	Линк для примера Добавлено через 4 минуты Нектос, вот здесь вроде бы как понятно расписано про селекторы 1

@Нектос 2 / 2 / 0 Регистрация: 26.04.2013 Сообщений: 18
	06.07.2013, 15:49 [ТС]
	SaNeK_71, за ссылку спасибо. Не получается у меня вашим методом. Теперь блок выпадающего окна мешает остальным элементам меню и сдвигает их с нужного места. 0

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 15:50
	Нектос, показывайте, что и как. Скрины или линк. 0

@Нектос 2 / 2 / 0 Регистрация: 26.04.2013 Сообщений: 18
	06.07.2013, 15:56 [ТС]
	SaNeK_71, http://jsfiddle.net/6yDMt/1/ 0

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 16:04
	Нектос, что-то я вообще не увидел своего кода в Ваших исходниках... 0

@Нектос 2 / 2 / 0 Регистрация: 26.04.2013 Сообщений: 18
	06.07.2013, 16:13 [ТС]
	SaNeK_71, ну я последовательно пытался сделать то, что прислали. Т.е. вставить дополнительный список рядом с ссылкой в другой список. Но этот список сдвигает элементы у родительского списка. Селектор display:none то помогает, но при hover'е (display:block) объекты всё равно смещаются. 0

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 16:14
	Нектос, пришлите все то, что было с моим кодом, когда у Вас что-то сдвигало... 0

@SaNeK_71 Прописан в интернете... 94 / 78 / 11 Регистрация: 06.04.2012 Сообщений: 345
	06.07.2013, 18:55
	Нектос, получилосЬ после последних поправок? 1

@Нектос 2 / 2 / 0 Регистрация: 26.04.2013 Сообщений: 18
	07.07.2013, 22:09 [ТС]
	SaNeK_71, да Большое спасибо! 0