Javascript 用鼠标打开div，不要单击

我做了这个：在右边你看到一个红色按钮。当你点击红色按钮时。带文本的内容屏幕即将出现。但我有一个问题。我可以用其他动画制作这个吗。如果你拿着你的鼠标。然后你可以滑开。用鼠标左键。然后内容框打开。你明白吗？我希望你能帮助我

---

您可以在JSFIDLE上看到代码。你可以在那里换。我希望你能帮助我。我是一个新手javascripter。我不知道我是如何做到这一点的。

我假设您正在切换OnClick（）事件中当前DIV的样式显示。 可以从Hover（）或MouseOver（）调用相同的代码基本上我只做了几件事：

• 将处理程序从“单击”更改为“鼠标指针”
• 添加了一个“mouseleave”处理程序，它执行相反的操作
• 将处理程序放在“what is delicious”容器上，而不是

守则：

$(function () {
    "use strict"
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");
    box.mouseenter(function (e) {
        e.preventDefault();
        if ($(button).hasClass("open")) {

        } else {
            $("body").append('<div class="background-overlay"></div>');
            button.addClass("open");
            box.animate({ right: "0"}, 750);
        }
    }).mouseleave(function (e) {
        e.preventDefault();
        if ($(button).hasClass("open")) {
            $("body").find('div.background-overlay').remove();
            button.removeClass("open");
            box.animate({ right: -303}, 750);

        } else {
        }
    });
});

$（函数（）{
“严格使用”
变量框=$（“.what is delicious”），
按钮=$（“.what is delicious>a”）；
框.鼠标指针（功能（e）{
e、 预防默认值（）；
if（$（按钮）.hasClass（“打开”））{
}否则{
$（“正文”）。附加（“”）；
按钮。添加类（“打开”）；
动画（{右：“0”}，750）；
}
}).mouseleave（功能（e）{
e、 预防默认值（）；
if（$（按钮）.hasClass（“打开”））{
$（“body”）.find（'div.background-overlay'）.remove（）；
按钮。移除类（“打开”）；
制作动画（{右：-303}，750）；
}否则{
}
});
});

---

“preventDefault（）”调用实际上已经不需要了，但我把它们放在那里了。

要实现拖动，可以使用

mousedown

/

mouseup

/

mousemove

如下所示：

$（函数（）{
“严格使用”；
变量框=$（“.what is delicious”），
按钮=$（“.what is delicious>a”）；
var mouseDown=false，
=0，
开始=-303；
按钮。鼠标向下（功能（e）{
mouseDown=true；
$（'*'）.bind（'selectstart'，false）；//在拖动时阻止选择
抓取=e.pageX；//保存抓取的位置
$（“正文”）。附加（“”）；
});
$（'body'）.mouseup（函数（）{
mouseDown=false；
$（'*'）。解除绑定（'selectstart'，false）；//再次允许选择
$（“.background overlay”）.remove（）；
start=parseInt（box.css（'right'），10）；//保存start以备下次使用
//（parseInt删除“px”）
}).mousemove（函数（e）{
if（mouseDown）{//仅当您正在拖动
//将右键设置为-pageX（差异）+启动时启动“右键”
//拖动。如果拖动太远，请将其设置为0。
css（“右”，Math.min（抓取-e.pageX+start，0））；
}
});
});

你的意思是你可以把红色标签拖到左边，内容框就会移动，这样它就可以打开了？是的，我是说。我该怎么做呢？你的意思是在按住左键的情况下拖动红色按钮，滑动面板，还是在鼠标悬停时简单地展开面板？是的，这就是我的意思Daniel。。。我怎么做？我怎么做。很抱歉你能举一个我正在寻找的JSFIDLEYAH代码的例子吗。很酷的东西！

$(function () {
    "use strict";
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");

    var mouseDown = false,
        grabbed   = 0,
        start     = -303;

    button.mousedown(function(e) {
        mouseDown = true;
        $('*').bind('selectstart', false); // prevent selections when dragging
        grabbed = e.pageX; // save where you grabbed
        $("body").append('<div class="background-overlay"></div>');
    });

    $('body').mouseup(function() {
        mouseDown = false;
        $('*').unbind('selectstart', false); // allow selections again
        $(".background-overlay").remove();
        start = parseInt(box.css('right'), 10); // save start for next time
                                                // (parseInt to remove 'px')

    }).mousemove(function (e) {
        if(mouseDown) { // only if you are dragging
            // set right to grabbed - pageX (difference) + start 'right' when started
            // dragging. And if you drag too far, set it to 0.
            box.css("right", Math.min(grabbed - e.pageX + start, 0));
        }
    });
});