单击后恢复悬停规则

Question

我正在使用以下脚本 hide/show 我的主导航菜单项。你可以在这里看到它：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');
    })

此外，在 link 上的 css 文件中我找到了以下内容：

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

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

编辑：哦，我现在明白了。您将 div 命名为 ul 和 li。 :)

单击后恢复悬停规则

Reinstate hover rules after click

javascript

navigation

jquery