CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Learning
Learning

Reputation: 20001

Hide menu element not working

I need to hide class element media-caption and make it visible only when one hover over it and first element of the submenu needs to be visible when one hover over the parent menu also.

I tried to fix it using jquery but i so far it is not working in a right way.

Please have a look at Fiddle | fiddle demo view

I also not able to understand why image changes automatically and not the media-caption elements.

Thanks.

Please feel free to make changes to make it look more professional as i am just a beginner.

Upvotes: 0

Views: 263

Answers (3)

SarathSprakash
SarathSprakash

Reputation: 4624

Working DEMO

Try this

    $(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");
    });


});

Hope this helps, Thank you

Upvotes: 0

EdenSource
EdenSource

Reputation: 3387

Probably not the most optimized sample, but it's working.

I use jquery for this, so, i removed every hover statment for submenu in CSS.

Then i add the hover/out effect with 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" );
     });

});

And i add a flag too in order to identify the first element that must be displayed if not hovered:

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

See this fiddle

Ask if you have some troubles using this.

Upvotes: 1

navin2013
navin2013

Reputation: 11

there is no need of jquery. Remove the jquery first.. and your code works fine.

if you don't want to display the first sub items image then just remove the following code

.dropdown li:first-child .dd-panel

from your css file

Upvotes: 0

Related Questions