jQuery悬停菜单

Question

当您滚动Google搜索结果时，如果将鼠标悬停在搜索结果上，会弹出右侧菜单（显示网站结果的快照）。

我有如下特征：

• 用户在浏览餐厅的菜单
• 他/她选择要添加到购物车
• 我沃尔德想显示右侧的菜单项将鼠标悬停在某个物品上时，可以在用户选择物品时看到该侧面菜单中的购物车详细信息（用户甚至可以从该购物车中删除显示在右侧菜单中的物品）。

我可以用jQuery来做这个吗？有没有可用的插件？这更像是一个“悬停菜单”。

谢谢！

Answer 1

创建一个隐藏的div。使用后：

$("#id").show(); 
$("#id").hide(); 

希望它可以帮助

你可以从一些insperation：

• http://home.comcast.net/~littlemoe85/thumbhover/index.html
• http://craigsworks.com/projects/simpletip/

Answer 2

$('#menu li.items').hover(function() { 
    // show right-side menu and populate it with info about item 
}, function() { 
    // hide right-side menu 
}).click(function() { 
    // show cart-details in right-side menu and lock it 
}); 

Answer 3

我BELI前夜你正在寻找的东西，如：

<ul id="storeItems"> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

<ul id="hoverMenu"> 
    <li>inCart1</li> 
    <li>inCart1</li> 
    <li>inCart1</li> 
</ul> 

<script> 
var hoverMenu = $('#hoverMenu'); 
$(hoverMenu).hide(); 

$('#storeItems li').hover(function() { 
    $(this).append(hoverMenu); 
    $(hoverMenu).show(); 
}, function() { 
    $(hoverMenu).hide(); 
}); 
</script> 

添加悬停菜单给你徘徊让你卷进悬停菜单没有它下降（因为你不会被轧断你是该项目的事徘徊）。

• 使用“添加”方法允许使用只有一个“悬停菜单”因为追加的情况下将只是移动的项目，如果它是在页面上了。

演示 - http://jsfiddle.net/joalbright/4mAYE/

Answer 4

虽然最有可能的插件，做similiar的事情，这不应该是这么难实现。

假设这样的结构：

<ul class="restaurant-menu"> 
    <li> 
     <a href="tastymenu.html"><img src="yummy.jpg" alt="" /></a> 
     <div class="info" style="display:none;"> 
     <!-- you could put all kinds of info here --> 
     </div> 
    </li> 
</ul> 

...你可以做这样的事情：

$(function() { 
    $('.restaurant-menu li a').hover(function() { 
     // add the contents of .info to the menu info div and show it 
     $('#menu-info').html($('.info', this).html()).show(); 
    }).mouseout(function() { 
     // hide the menu info div 
     $('#menu-info').hide(); 
    }).click(function() { 
     // do other stuff 
    }); 
});