0

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

4

2 回答 2

1

您可以轻松地使用 CSS 在鼠标悬停时扩展子菜单，方法是将子菜单移动<ul>到<li>父菜单条目的 中，并将子菜单display: block;设置为li:hover. 看这个小提琴（我没有完成子菜单的样式，但你应该明白了）。

这种方法的问题：你不能用 CSS 轻松地制作动画。但是您仍然可以尝试对元素的mouseover事件进行动画处理。<li>

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

于 2012-11-11T16:02:36.370 回答
0

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

例子：

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

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

could be replaced with

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

您可以让子菜单成为按钮的子元素，这样，css 可用于在 :hover 按钮上隐藏/显示子菜单

于 2012-11-11T15:26:19.907 回答