Question

我使用以下脚本隐藏/显示我的主导航菜单项。你可以在这里看到它：http://205.134.239.12/~artscr6/artscrush/#！

我的菜单的一部分使用向下箭头（使用带有<i>标签的字体真棒表示），当用户将鼠标悬停在菜单项上时，会出现箭头。这在初始状态下有效，但是一旦用户单击其中一个菜单项以显示弹出按钮，悬停效果将不再用于显示箭头。

我需要添加什么来保持悬停效果，但仍保持当前行为？

/Remove the link elements from the main nav top level
$('.menuItem a').attr('href', '#!');

//Show the down arrows on hover
    $('menuItem').hover(function() {
        $(this).find('i').css('opacity', '1');
    })

//Once menu is clicked
$('.menuItem').click(function() {

    //Reset
    menuReset();

    //Find the correct flyout
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var findFlyout = '#acFly_' + id;

    //Make this item active
    $(this).addClass('active');

    //Bumps the current down arrow down a bit and shows it
    $(this).find('i').css('opacity', '1');
    $(this).find('i').css('top', '7px');


    //Show the flyout
     event.stopPropagation(); //This prevents dom from overriding us
    $(findFlyout).toggle();

    //Prevent clicks on the current menu from hiding the flyout
    $(findFlyout).click(function(){
        event.stopPropagation();
    })



})

//Hide the menu when the user clicks anywhere 
$(document).click( function(){
    menuReset();
})


function menuReset() {
    $('.flyMenu').hide();
    //Resets the down arrows to orig position and hidden
    $('.menuItem').find('i').css('opacity', '0');
    $('.menuItem').find('i').css('top', '0px');
    $('.menuItem').removeClass('active');
}

Answer 1

//Show the down arrows on hover
    $('menuItem').hover(function() { // Shouldn't this be .menuItem instead?
        $(this).find('i').css('opacity', '1');
    })

另外，在你给我的链接上的css文件中，我找到了以下内容：

#menu .ul .li:hover i{
    opacity: 1;
}

我认为ul和li不是类，所以为什么会有类。？

编辑：哦，我现在看到了。你把你的div命名为ul和li。：）

单击后恢复悬停规则

1 个答案: