Question

当菜单按钮上有鼠标悬停时，我创建了一个工具提示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/

Answer 1

通过将子菜单<ul>移动到父菜单条目的<li>，并在{{1}上创建子菜单display: block;，您可以轻松地使用CSS在鼠标悬停时扩展子菜单}}。请参阅this fiddle（我没有完成子菜单的样式，但你应该明白这一点。）

此方法存在问题：您无法使用CSS轻松制作动画。但您仍可以尝试在li:hover元素的mouseover事件上执行动画。

优点：显示内容无需javascript。此外，这应该适用于所有现代浏览器（可能不是IE 5.5，但这不是一个“真正的”浏览器：D）。

Answer 2

我不确定你到底要完成的是什么，但是，对于初学者，您可以通过使用css代替javascript来减少，简化和优化代码，以实现此功能的大部分。

示例：

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

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

could be replaced with

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

你可以让子菜单成为按钮的子元素，这样，css可以用来隐藏/显示子菜单：悬停在按钮上

允许鼠标悬停工具提示

2 个答案: