Скрыть элемент меню не работает

Question

Скрыть элемент меню не работает

0

Мне нужно скрыть media-caption класса элемента и сделать его видимым только тогда, когда наведите указатель мыши на него, и первый элемент подменю должен быть видимым, когда наведите курсор мыши на родительское меню.

Я попытался исправить это с помощью jquery, но до сих пор он не работает правильно.

Посмотрите на Fiddle | демонстрационный просмотр скриптов

Я также не могу понять, почему изображение изменяется автоматически, а не элементы media-caption.

Благодарю.

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

Learning 03 окт. 2013, в 09:10

Источник

0

Я пытался заставить его работать с использованием CSS, но он не работал, поэтому переключился на JQuery. если я добавляю цвет фона, а не прозрачное изображение, то он работает нормально, но мне нужно, чтобы он работал на прозрачность ..
Learning 03 окт. 2013, в 07:19
2

@ArpitSrivastava Как бы вы наводили курсор на элемент с display: none ?
Teemu 03 окт. 2013, в 07:19
1

Мое плохое это будет как class-name >second-class-name{display:none} и class-name:hover>second-class-name{display:block}
Arpit Srivastava 03 окт. 2013, в 07:23
0

@ArpitSrivastava, вы можете исправить это на скрипке, пожалуйста ....
Learning 03 окт. 2013, в 07:25
0

у меня было что-то похожее раньше .nav ul li a:hover .dropdown ul li p:first-child { display:block; }
Learning 03 окт. 2013, в 07:29
0

@ArpitSrivastava, не получил вас, если вы исправили это, то он не работает, поскольку он по-прежнему перекрывает текст ...
Learning 03 окт. 2013, в 07:35

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

css3

3 ответа

0

Рабочий ДЕМО

Попробуй это

    $(document).ready(function () {

    $(".nav>li").on("mouseenter", function () {
        if($(this).find('.dd-panel').length>0)
        {
       $(this).find('.dropdown').addClass("has-panel");
        }
        $(this).find(".media-caption:first").css("display", "block");

    });

    $(".nav>li").find(".dropdown li:not(li:first)").on("mouseenter", function () {

        $(this).parents('.nav>li').find('.media-caption:first').css("display", "none");
    });


});

Надеюсь, это поможет, спасибо

SarathSprakash 03 окт. 2013, в 06:09

0

Он разбивает меню без панели и показывает это как мегаменю ..
Learning 03 окт. 2013, в 08:33
0

@KnowledgeSeeker, извините за задержку, которая исправлена, я обновил демо и код
SarathSprakash 03 окт. 2013, в 09:28
0

@KnowledgeSeeker, пожалуйста, смотрите на скрипке
SarathSprakash 03 окт. 2013, в 12:57

Показать ещё 1 комментарий

0

нет необходимости в jquery. Сначала удалите jquery.. и ваш код работает нормально.

если вы не хотите отображать первый подтип изображения, просто удалите следующий код

.dropdown li:first-child .dd-panel

из вашего файла css

navin2013 03 окт. 2013, в 05:39

0

Я хочу отобразить изображение и текст. но я хочу, чтобы это было видно на парения эффект этого элемента только и первого подменю элемента и соответствующий текст будет виден , когда один парить над ним родительского меню li
Learning 03 окт. 2013, в 07:48

Ещё вопросы

Я пытался заставить его работать с использованием CSS, но он не работал, поэтому переключился на JQuery. если я добавляю цвет фона, а не прозрачное изображение, то он работает нормально, но мне нужно, чтобы он работал на прозрачность ..
@ArpitSrivastava Как бы вы наводили курсор на элемент с display: none ?
Мое плохое это будет как class-name >second-class-name{display:none} и class-name:hover>second-class-name{display:block}
@ArpitSrivastava, вы можете исправить это на скрипке, пожалуйста ....
у меня было что-то похожее раньше .nav ul li a:hover .dropdown ul li p:first-child { display:block; }
@ArpitSrivastava, не получил вас, если вы исправили это, то он не работает, поскольку он по-прежнему перекрывает текст ...
Он разбивает меню без панели и показывает это как мегаменю ..
@KnowledgeSeeker, извините за задержку, которая исправлена, я обновил демо и код
@KnowledgeSeeker, пожалуйста, смотрите на скрипке
Я хочу отобразить изображение и текст. но я хочу, чтобы это было видно на парения эффект этого элемента только и первого подменю элемента и соответствующий текст будет виден , когда один парить над ним родительского меню li

EdenSource · Accepted Answer · 2013-10-03T06-30-00.000Z

Вероятно, это не самый оптимизированный образец, но он работает.

Я использую jquery для этого, поэтому я удалил каждый элемент hover для подменю в CSS.

Затем я добавляю эффект hover/out с помощью jquery:

$(".dropdown ul li").each(function(){
    $(this).mouseenter(function(){
            $(this).parent().find( ".active" ).css( "display", "none" );
            $(this).find( ".dd-panel" ).css( "display", "block" );

     });
});

 $(".dropdown ul li").each(function(){
    $(this).mouseleave(function(){
            $(this).find( ".dd-panel" ).css( "display", "none" );
            $(this).parent().find( ".active" ).css( "display", "block" );
     });

});

И я добавляю также флаг, чтобы идентифицировать первый элемент, который должен отображаться, если он не зависает:

$(".dropdown li:first-child .dd-panel",$(this)).css( "display", "block" );
$(".dropdown li:first-child .dd-panel",$(this)).addClass("active");

Смотрите эту скрипку

Спросите, есть ли у вас проблемы с этим.

Упс .. Моя ошибка .. Я также отмечу это как правильный ответ.