在div上處理mouseenter/mouseleave和在jQuery中嵌套元素

如果鼠標位於div或任何div的嵌套元素上，我想要顯示一個工具欄。但是下面的jQuery 1.7解決方案只有在鼠標經過div時纔有效，只有在item css類中添加padding纔有可能。在div上處理mouseenter/mouseleave和在jQuery中嵌套元素

<head> 
    <script type="text/javascript" src="jquery-1.7.min.js"></script> 
    <style type="text/css"> 
    .toolbar { display: none; } 
    .item { padding: 1px; } /* doesn't work without padding! */ 
    </style> 
    <title>Demo</title> 
</head> 

    <body> 

    <div class="section"> 
    <div class="item"> 
     <p class="toolbar">TOOLS</p> 
     <p>content</p> 
    </div> 
    <div class="item"> 
     <p class="toolbar">TOOLS</p> 
     <p>content</p> 
    </div> 
    </div> 

    <script type="text/javascript"> 
    $(".section").on(
     "mouseenter", 
     ".item", 
     function(event) { 

     $(event.target).children('.toolbar') 
      .show(100); 
     } 
    ) 

    $(".section").on(
     "mouseleave", 
     ".item", 
     function(event) { 
     $(event.target).children('.toolbar').hide(); 
     } 
    )  
    </script> 

</body>

1px的的填充不會如此糟糕，但它會導致更大的填充在頂部和底部，這種解決方法不能正常工作 - 特別是如果鼠標從左側或右側進入。

如何處理沒有填充技巧的mouseenter和mouseleave事件？

來源

2011-11-18 deamon

我知道@ ManseUK發佈了正確的答案，但我只是想添加一個關於填充技巧的快速筆記。這工作（大部分時間），因爲添加填充停止[邊緣崩潰]（http://www.w3.org/TR/css3-box/#collapsing-margins），所以事件可以觸發'.item '（其中'event.target'顯然是你想要的）以及'p's。 – meloncholy

看來，event.target不是DIV - 更改爲$(this)修復的問題 - >http://api.jquery.com/event.target/

http://jsfiddle.net/manseuk/StUvz/

來源

2011-11-18 22:44:33 ManseUK

'$（'body'）'**是一個有效的選擇器，'$（document.body）'可能只是更快一點） –

'$（「body」）'在我的例子中是一個簡化，我將它改爲'.section'周圍'div'的類是什麼。 – deamon

@deamon好 - 我改變的另一件事是'$（this）'而不是'$（event.target）' - > http://api.jquery.com/event.target/ – ManseUK

This fiddle我創建工作正常，沒有填充。也許你只需要調整一些小東西（比如CSS鏈中繼承的寬度）。

如果沒有爲您解答，請給我們提供一個重現問題的小提琴，以便我們爲您修改它。

來源

2011-11-18 22:39:32

不填充這一個工作，也http://jsfiddle.net/rkpVW/你可以直接做的（」。項目「）我認爲這是綁定元素的最簡單的解決方案。

編輯：http://jsfiddle.net/rkpVW/1/使用實時動態內容

來源

2011-11-18 22:49:03 iRyusa

當html被動態注入時（我的情況會發生什麼），直接使用'$（「。item」）'將不起作用。 – deamon

使用那個或委託的實時功能 – iRyusa

我用動態插入更新小提琴並使用實時函數http://jsfiddle.net/rkpVW/1/ – iRyusa

使用$(event.currentTarget)將清理的問題，並會表現一樣$(this)只因爲它會繼續的情況下更好地發揮作用，其中this是另一回事：

init: function() 
{ 
    $("button").on("mouseenter", this.proxy(function(event) 
    { 
     this.classMethod(); 

     console.log(event.currentTarget); 
    })); 
}

正如你所看到的，event.currentTarget是this：

$("button").on("mouseenter", function(event) 
{ 
    console.log(event.currentTarget === this); 
});

來源

2013-06-16 06:18:37

在div上處理mouseenter/mouseleave和在jQuery中嵌套元素

回答

相關問題