javascript - 如何将鼠标悬停在该按钮上以打开菜单而不是单击

Question

我有一个动画按钮，点击它会打开一个菜单， 是否可以将鼠标悬停在按钮上而不是单击来打开它？

我不确定它是使用 css 还是 javascript，但这是 fiddle link使用我想要鼠标悬停的按钮。

提前致谢!

Javascript

    jQuery(document).ready(function($) {

    var colors = '';
    var server_url = ''; 
    var folder_url = 'colors/'; 

    // Style switcher
    $(".hide-color").show(1000);
    $('#custumize-style').animate({
        left: '-134px'
    });

    $('#custumize-style .switcher').click(function(e) {
        e.preventDefault();
        var div = $('#custumize-style');
        if (div.css('left') === '-134px') {
            $('#custumize-style').animate({
                left: '0px'
            });

            // open switcher and add class open
            $(this).addClass('open');
            $(this).removeClass('closed');

        } else {
            $('#custumize-style').animate({
                left: '-134px'
            });

            // close switcher and add closed
            $(this).addClass('closed');
            $(this).removeClass('open');
        }
    })
});

Answer 1

你正在寻找 .hover()

将您的 .switcher 类留在您的选择器中会给您一些奇怪的行为，因为您会将鼠标悬停在您的 div 内的子标签上。删除该类会触发父 div(您的菜单 slider )上的悬停方法。

您的 JavaScript 的第 13 行会产生上述行为:

$('#custumize-style .switcher').hover(function(e) {

尝试这样的事情:

$('#custumize-style').hover(function(e) {