Изменение атрибута одного класса из другого (CSS)

@Genome · Регистрация: 22.03.2013

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

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

Есть css файл в одном из компонентов, в нем такой класс:

.sections-submenu{
display: none;
}

А вот, другой css файл в другом компоненте, и я хочу чтобы при наведении на элемент с данным ид (#horizontal-multilevel-menu li a.root-item-selected) у меня менялось свойство в (.sections-submenu), но оно не меняется.

#horizontal-multilevel-menu li a.root-item-selected:hover .sections-submenu
{
color: #e03081;
display: block;
}

Что я делаю не так, ребята ?

@сахей · 17.10.2014, 00:14

jQuery в помощь=)

@Давран · 17.10.2014, 07:04

Как сделать через jquery!

JavaScript
1
$('.changeFrom').removeClass('changeFrom').addClass('changeTo');

$('.changeFrom')-выбираешь нужный тебе div с классом changeFrom
removeClass('changeFrom')-класс который нужно удалить
addClass('changeTo')-класс который нужно добавить

Добавлено через 2 минуты
А если тебе нужно, что бы меню пряталось и появлялась по каким то причинам, используй hide() и show() тоже из jquery

@Genome · 17.10.2014, 12:07 **[ТС]**

Тогда вопрос по Jquery:

Создал скрипт:

JavaScript
1
2
3
4
5
6
var $ = jQuery;
 
$('#horizontal-multilevel-menu li a.root-item-selected').hover(function(){
    alert();
    //$(this).hide();
});

но он не отрабатывает, а в css этот ИД работает нормально:

HTML5
1
2
3
4
#horizontal-multilevel-menu li a.root-item-selected:hover
{
    color: #e03081;
}

В чем проблема ?

@сахей · 17.10.2014, 12:52

попробуй от точки отступ сделать

@Давран · 17.10.2014, 13:05

что это за запись? Зачем она?

JavaScript
1
var $ = jQuery;

@Genome · 17.10.2014, 13:05 **[ТС]**

Не помогло, пробовал и глобальный ИД указать (

JavaScript
1
$('#horizontal-multilevel-menu').hover(function(){

), все равно.

@Давран · 17.10.2014, 13:06

кинь полный div который нужно спрятать

@Genome · 17.10.2014, 13:11 **[ТС]**

HTML5
1
2
3
<div class="sections-submenu" style="position: absolute;">
      много кода
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sections-submenu{
    line-height: 18px;
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 10px 0px;
    box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 10px 0px;
 
    width: 1176px;
    height: 489px;
    position: relative;
    z-index: 1000;
    background-color: rgb(255, 255, 255);
 
    display: none;
}

@Давран · 17.10.2014, 13:18

попробуй так

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $('.sections-submenu').hover(function(){
            $('.sections-submenu').show();
        },
        function(){
            $('.sections-submenu').hide();
        }
    );
});

Добавлено через 1 минуту
и надеюсь у тебя подключена библиотека jquery(на всякий случай уточню)?

@Genome · 17.10.2014, 13:26 **[ТС]**

Библиотека, конечно, подключена, да и консоль ошибок не дает.

Вот так не работает, у меня как никак этот див скрыт ( display: none; ) и навестись на него не удастся. Да и не к чему это, ибо появляться оно должно, при наведении на один из пунктов меню, классы и ид, которых я указывал выше в скриптах.

Но на всякий случай для проверки, убрал display: none; и, при наведении скрипт отработал верно, убрав курсор с дива, он изчез.

@Давран · 17.10.2014, 13:30

Morhpix, понял в чем прикол. ты в этом месте

JavaScript
1
 $('.sections-submenu').hover(function(){

за место .sections-submenu напиши тот класс при наведении на который от должен показаться. То-есть
если id того дива #horizontal-multilevel-menu, то будет так

JavaScript
1
$('#horizontal-multilevel-menu').hover(function(){

только учти, если у тебя там id с таким названием, то будет "решетка", если class, то будет точка

@and_y87 · 17.10.2014, 14:09

Morhpix, выложи пример на фидл и починим...

@Genome · 17.10.2014, 14:16 **[ТС]**

Большое Вам спасибо, тут я чет уже не додумал . Я ведь делал уже хавер с этим ид, только вот он не работал. Как оказалось, не работал он потому, что я не указал событие документ реди, ибо считал его не обязательным.

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var $ = jQuery;
 
$(document).ready(function(){
    $('#horizontal-multilevel-menu').hover(function(){
            $('.sections-submenu').show();
        },
        function(){
            $('.sections-submenu').hide();
        }
    );
 
    $('.sections-submenu').hover(function(){
            $('.sections-submenu').show();
        },
        function(){
            $('.sections-submenu').hide();
        }
    );
});

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Genome 9 / 9 / 4 Регистрация: 22.03.2013 Сообщений: 226

	Изменение атрибута одного класса из другого (CSS) 15.10.2014, 16:36. Показов 10434. Ответов 13 Метки нет (Все метки) Добрый вечер. Есть меню, при наведении на один из пунктов этого меню должен отображаться блок. Есть css файл в одном из компонентов, в нем такой класс: .sections-submenu{ display: none; } А вот, другой css файл в другом компоненте, и я хочу чтобы при наведении на элемент с данным ид (#horizontal-multilevel-menu li a.root-item-selected) у меня менялось свойство в (.sections-submenu), но оно не меняется. #horizontal-multilevel-menu li a.root-item-selected:hover .sections-submenu { color: #e03081; display: block; } Что я делаю не так, ребята ? 0

@сахей 65 / 65 / 20 Регистрация: 26.02.2013 Сообщений: 336 Записей в блоге: 1
	17.10.2014, 00:14
	jQuery в помощь=) 0

@сахей 65 / 65 / 20 Регистрация: 26.02.2013 Сообщений: 336 Записей в блоге: 1
	17.10.2014, 12:52
	попробуй от точки отступ сделать 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	17.10.2014, 13:06
	кинь полный div который нужно спрятать 0

@Genome 9 / 9 / 4 Регистрация: 22.03.2013 Сообщений: 226
	17.10.2014, 13:26 [ТС]
	Библиотека, конечно, подключена, да и консоль ошибок не дает. Вот так не работает, у меня как никак этот див скрыт ( display: none; ) и навестись на него не удастся. Да и не к чему это, ибо появляться оно должно, при наведении на один из пунктов меню, классы и ид, которых я указывал выше в скриптах. Но на всякий случай для проверки, убрал display: none; и, при наведении скрипт отработал верно, убрав курсор с дива, он изчез. 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	17.10.2014, 14:09
	Morhpix, выложи пример на фидл и починим... 0

Изменение атрибута одного класса из другого (CSS)

Решение