使用鼠標打開div而不是單擊

Question

我已將此設爲：This右側顯示一個紅色按鈕。當你點擊紅色按鈕時。包含文字的內容畫面即將到來。但我有這個問題。我可以用其他動畫製作嗎？如果你拿着你的鼠標。然後你可以滑動打開。用鼠標左鍵。然後打開內容框。你到底懂不懂呢？我希望你能幫助我。

您可以在jsfiddle上看到代碼。你可以在那裏改變它。我希望你能幫助我。我是一個初學者。以及如何也不知道如何做到這一點。

Answer 1

要實現拖動，您可以使用mousedown/mouseup/mousemove像這樣：http://jsfiddle.net/pimvdb/25y4K/8/。

$(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)); 
     } 
    }); 
}); 

Answer 2

我會假設你正在切換當前在OnClick（）事件中的DIV的Style.Display。 相同的代碼可從懸停（）或鼠標懸停（）被調用

Answer 3

Here is an updated fiddle.基本上，我只是做了兩件事情：

• 有變化時的處理程序「單擊」到「的mouseenter」
• 增加了一個「鼠標離開」處理程序，做相反的事
• 把處理程序上「是什麼 - 是好吃」，而不是集裝箱的<a>

代碼：

$(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 { 
     } 
    }); 
}); 

的「的preventDefault（）」調用是不是真的有必要了，但我離開他們那裏。