在鼠標懸停事件中使用jquery.position將div覆蓋到td單元上

我有一個只有數字和小字號的大表，這使得很難看清楚。增加字體大小不是一種選擇，但我想提供一個類似縮放的效果（無需使用瀏覽器縮放），如果它包含任何內容，則在懸停的td單元上使用簡單的div覆蓋。
div應該以td單元爲中心，div的內容應該替換爲hdd單元格的文本內容。在鼠標懸停事件中使用jquery.position將div覆蓋到td單元上

我的錯誤在哪裏？
注：我使用.delegate（）而不是.hover（），因爲我已經在做其他需要委託的東西。

HTML

<div id="mine"><table border="1" cellspacing="2" cellpadding="2"> 
    <tr><td></td><td></td><td>1</td><td>2</td></tr> 
    <tr><td>3</td><td></td><td></td><td>5</td></tr> 
</table></div> 
<div id="your">vale</div>

CSS

#your { 
    position: absolute; 
    width: 40px; 
    height: 30px; 
    z-index: 100; 
    border: 1px solid green; 
    text-align: center; 
    vertical-align: middle; 
}

$(document).ready(function() { 
    $('#mine').delegate('td', 'mouseover mouseleave', function(e) { 
    if ($(this).text().length > 0) { 
     if (e.type == 'mouseover') { 
     $('#your').position({ 
      my: "center bottom", 
      at: "center top", 
      of: this, 
      offset: "0 -20", // Place it above td cell 
      collision: "none" 
     }); 
     $('#your').clearQueue(); 
     $('#your').text($(this).text()).fadeIn(200); 
     } else { 
     $('#your').delay(300).fadeOut(200); 
     } 
    } 
    }); 
});

編輯我看到#your在第一次飛行時會飛到整個地方，然後接下來的幾次翱翔起作用，但隨後它開始彈出所有奇怪的地方 - 包括#mine以外的地方。

來源

2010-11-05 Kim

究竟它是你的問題？我嘗試了它，它的工作原理是，當你將鼠標懸停在某個物品上時，它會快速淡入/淡出，但定位效果很好。這是你遇到的問題嗎？ – DaiYoukai 2010-11-05 05:54:42

我正在使用http://jsfiddle.net/來測試代碼，但它沒有在那裏工作。在我的網站上工作..有點。查看編輯的代碼。 – Kim 2010-11-05 14:07:16

我最初有同樣的問題，只要確保您使用的是最新版本的JQuery和UI。 – DaiYoukai 2010-11-05 18:49:22

使用覆蓋DIV，這比它覆蓋是一個壞主意元素大 - 它必須是別的地方。
這是我最終做的分裂「mouseover」&「mouseleave」不是一個選項，由於其他事情的執行。

$(document).ready(function() { 
    $('#mine').delegate('td', 'mouseover mouseleave', function(e) { 
    if ($(this).text().length > 0) { 
     if (e.type == 'mouseover') { 
     var off = $(this).offset(); 
     $('#your').css({ // Using .position() was buggy. Styles ALWAYS works 
      opacity: '', // Remove it if fadeOut didnt finish properly, eg too fast mouse movement 
      left: (off.left -14)+'px', // 14 is half of box width 
      top: (off.top -20 -37)+'px', // 37 is height of font within box. 20 is to place it above 
     }); 
     $('#your').clearQueue().text($(this).text()).show(); // fadeIn wasnt really needed 
     } else { 
     $('#your').delay(900).fadeOut(150); // long delay to allow moving mouse to another cell without box disappearing fast, else fade out fast 
     } 
    } 
    }); 
});

來源

2010-11-11 23:08:30 Kim

如果你的問題是發生在閃爍，那是因爲你擁有它淡出#your當你離開td，你離開第二#your出現（因爲在那個時候，因爲你直接懸停出現在您的鼠標光標下#your在td）

辦法解決這一問題是去除從#mine的mouseleave和mouseleave創建單獨的收聽者專門爲#your。所以當你的鼠標離開#your它將fadeOut #your。

$(document).ready(function() { 
    $('#mine').delegate('td', 'mouseover', function(e) { 
    if ($(this).text().length > 0) { 
     if (e.type == 'mouseover') { 
     $('#your').position({ 
      my: "center", 
      at: "center", 
      of: e, 
      collision: "none" 
     }); 
     $('#your').clearQueue(); 
     $('#your').text($(this).text()).fadeIn(200); 
     } 
    } 
    }); 
}); 

$('#your').mouseleave(function() { 
    $(this).fadeOut(200) 
});

此外，更改您的CSS，以便#your不會開始可見。

#your { 
    position: absolute; 
    display: none; 
    width: 40px; 
    height: 30px; 
    z-index: 100; 
    border: 1px solid green; 
    text-align: center; 
    vertical-align: middle; 
}

來源

2010-11-05 06:02:50 DaiYoukai

在鼠標懸停事件中使用jquery.position將div覆蓋到td單元上

回答

相關問題