如何鼠标悬停这个按钮来打开菜单而不是点击?

I have this kinda animated button that opens a menu on click, Is it possible to mouse hover the button to open it, instead of clicking?

我有一个动画按钮，打开一个菜单点击，是否可以鼠标悬停按钮打开它，而不是点击?

I'm not sure if it's with css or javascript, but here's the fiddle link with the button i want to mouse hover.

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

Thanks in advance!

提前谢谢!

Javascript

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');
        }
    })
});

1 个解决方案

#1

You're looking for .hover()

你正在寻找.hover()

Leaving your .switcher class in your selector will give you some strange behavior because you would be firing your hover on the child a tag inside of your div. Removing that class fires your hover method on the parent div (your menu slider).

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

Line 13 of your JavaScript like this would give the behavior described above:

像这样的JavaScript第13行将给出上面描述的行为:

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

Try something like this instead:

试试这样做吧:

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

#1