JQuery выпадающих опций - какие проблемы с цветом фона и какие - лучше подходы?

Я пытаюсь создать некоторые выпадающие элементы с помощью CSS и jquery. Вот чего я пытаюсь достичь:

  • При наведении курсора мыши на определенное слово в предложении цвет фона слова изменяется, и появляется выпадающий список с несколькими вариантами (с использованием того же цвета фона).
  • Цвет фона исходного выделенного слова должен сохраняться
    при наведении указателя мыши на параметры ниже.
  • После выхода из выпадающего меню оно должно вернуться к скрытому, а
    исходное слово должно вернуться к прозрачному фоновому цвету.

Решение, которое у меня есть на данный момент, не работает идеально. При наведении курсора выпадающий элемент немного мигает. Мне интересно, кто-нибудь мог бы предложить несколько лучших подходов?

Я думаю, что то, что я сделал, на самом деле немного взломано. Я не уверен, как выбрать конкретный элемент li, над которым пользователь изначально наводит курсор, чтобы я мог изменить цвет bg этого конкретного элемента (без специального назначения идентификаторов каждому родительскому элементу li). Поэтому вместо того, чтобы оставить выпадающий список, я просто изменяю все элементы li на прозрачные, а затем должен изменить все элементы на синий цвет bg, если слово будет выделено снова. Также при наведении курсора на подэлементы я каждый раз эффективно меняю цвет bg, что также не кажется лучшим способом сделать это.

Вот JavaScript:

     $('#nav li').hover(
    function () {

       $(this).css('background-color', '#A7B7FF'); // to set parent item to  blue
        $('ul', this).css('background-color', '#A7B7FF'); // set sub items to  blue
        //show its submenu
        $('ul', this).css('z-index', '600'); // so it overlaps other drop down below
        $('ul', this).slideDown(100);

    },
    function () {
        //hide its submenu

        $('ul', this).slideUp(100,
            function() {

               $('li').css('background-color', 'transparent'); // callback so parent item returns to transparent


            }
        );
    }
);

Для полного примера посмотрите здесь: http://jsfiddle.net/A4r2m/1/

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

javascript,jquery,css,

0

Ответов: 1

0 принят

Я ограничил воздушный отпуск на 500 миллисекунд, чтобы он не мерцал. Это также означает, что требуется 500 миллисекунд для того, чтобы меню исчезло после того, как пользователь покинул область, так что пользователь может ненадолго покинуть область, а затем вернуться, и ему не придется заново анимировать.

редактировать: мне нужно было добавить отмену в удушенный hoverOut.

http://jsfiddle.net/A4r2m/4/

JavaScript, JQuery, CSS,
Похожие вопросы
Яндекс.Метрика