允許鼠標懸停工具提示

我創建了一個工具提示div來彈出菜單按鈕上的鼠標懸停，當鼠標懸停按鈕時出現工具提示，當您鼠標移出時消失，但我希望能夠滾動到子菜單（＃submenu.Solutions在這種情況下），我不知道如何去做這件事，我已經嘗試設置超時和變量，以查看是否有一個鼠標懸停在子菜單上，但它只是出了問題。允許鼠標懸停工具提示

我最近添加了mousemove，看看我是否可以做一些寬度和高度的事情，但我有點難住。所以我只是把它留在那裏給你看。

$('#btnSolutions').mouseover(function() { 
    $('#btnSolutions').css("background", "#0f4759"); 
    $('#submenu.Solutions').css("display", "block"); 
    var p = $(this); 
    var offset = p.offset(); 
    $("#submenu.Solutions").offset({ top: offset.top + 37, left: offset.left}) 
}).mousemove(function(e){ 
    var p = $(this); 
    var offset = p.offset(); 
    $('#submenu.Solutions').height(); 
    $('#submenu.Solutions').width(); 
}).mouseout(function() { 
    $("#btnSolutions").css("background", "none"); 
    $('#submenu.Solutions').css("display", "none"); 
}); 
// 
$('#submenu.Solutions').mouseover(function() { 

}).mouseout(function() { 
    $("#btnSolutions").css("background", "none"); 
    $('#submenu.Solutions').css("display", "none"); 
});

謝謝。

編輯： JS FIDDLE http://jsfiddle.net/Lp5Tt/

來源

2012-11-11 Matthew

請發佈HTML標記。最好的辦法是把它放在一個[JSFiddle]（http://jsfiddle.net/）上供其他人玩耍。 – opatut

當然，根據你的要求，這裏是菜單的JS小提琴http://jsfiddle.net/Lp5Tt/ – Matthew

通過將子菜單<ul>移動到父菜單項的<li>，並在li:hover上設置子菜單display: block;，可以輕鬆地使用CSS擴展鼠標懸停的子菜單。請參閱this fiddle（我沒有完成子菜單的樣式設計，但您應該明白）。

此方法存在問題：您無法使用CSS輕鬆製作動畫。但是，儘管如此，您仍然可以嘗試在<li>元素的mouseover事件上執行動畫。

優點：不需要JavaScript來顯示內容。此外，這應該適用於所有現代瀏覽器（可能不是IE 5.5，但這不是一個「真正的」瀏覽器：D）。

來源

2012-11-11 16:02:36 opatut

非常感謝！ – Matthew

如果答案幫助您解決了問題，並且您對此感到滿意，請不要忘記查看左側的綠色勾號以使其成爲「已接受的答案」。 – opatut

我不知道你所要完成的，但是，對於初學者來說，你可以裁減，簡化並通過使用CSS而不是JavaScript來優化你的代碼到底是什麼這個功能的很大一部分。

例如：

$('#btnSolutions').mouseover(function() { 
    $('#btnSolutions').css("background", "#0f4759"); 

}.mouseout(function() { 
$("#btnSolutions").css("background", "none"); 

could be replaced with 

#btnSolutions:hover { 
    background: #0f4759; 
}

你可以有子菜單中的按鈕的子元素，這樣一來，可以使用CSS來隱藏/時顯示的子菜單：懸停按鈕

來源

2012-11-11 15:26:19 CodeToad

mouseover上的顏色變化是爲了調試的目的，我確實在調試。我沒有顯示任何問題，我遇到的問題是當我的鼠標懸停運行時，工具提示顯示我想讓工具提示在光標懸停在工具提示上時保持打開狀態，我想知道我該如何去關於這樣做。 – Matthew

如果我理解正確，當鼠標光標移出'tooltip-target'元素並移入工具提示時，您不希望toolltip關閉。在這種情況下 - 使工具提示成爲目標元素的子元素。你可以使用絕對位置標記和溢出可見將工具提示放置在父代之外 – CodeToad

允許鼠標懸停工具提示

回答

相關問題