鼠标移入显示一个菜单列表 移出隐藏
2013-10-21 23:52
309 查看
鼠标移动到图片显示一个菜单列表。移出隐藏菜单列表。
<img id="clicshow" src=" "/>
<div id="show">
<div style="color: #469214">全部</div>
<div style="width: 70px;height: 1px;background: #bbc7d6;margin: 0 auto;box-shadow: 0px 1.5px 1px #fff; "> </div>
<div>投保人</div>
<div style="width: 70px;height: 1px;background: #bbc7d6;margin: 0 auto;box-shadow: 0px 1.5px 1px #fff; "> </div>
<div>险种</div>
</div>
//js部分
$(function(){
$("#show").hide();
$("#clicshow").mouseover(function(){
// $("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
$("#clicshow").mouseout(function(){
$("#show").slideUp("fast");
});
});
<img id="clicshow" src=" "/>
<div id="show">
<div style="color: #469214">全部</div>
<div style="width: 70px;height: 1px;background: #bbc7d6;margin: 0 auto;box-shadow: 0px 1.5px 1px #fff; "> </div>
<div>投保人</div>
<div style="width: 70px;height: 1px;background: #bbc7d6;margin: 0 auto;box-shadow: 0px 1.5px 1px #fff; "> </div>
<div>险种</div>
</div>
//js部分
$(function(){
$("#show").hide();
$("#clicshow").mouseover(function(){
// $("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
$("#clicshow").mouseout(function(){
$("#show").slideUp("fast");
});
});
相关文章推荐
- Ext 中 对 grid cell 单元 鼠标移入移出显示隐藏弹窗
- jQuery事件-div的显示隐藏及鼠标的移入移出http://www.cnblogs.com/liuyanmin/p/5146544.html
- jQuery事件-div的显示隐藏及鼠标的移入移出
- checkbox下面的提示框 鼠标移入时显示,移出时隐藏
- AngularJS实现鼠标移入内容显示,鼠标移出内容隐藏
- 鼠标在导航栏移入移出的隐藏显示效果jquery
- AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果
- 鼠标移入显示,移出隐藏动态网页实现
- js--鼠标移入移出小图片,显示隐藏大图片
- jQuery事件-div的显示隐藏及鼠标的移入移出
- jQuery事件-div的显示隐藏及鼠标的移入移出
- 001鼠标移入移出——文本框显示/隐藏
- 鼠标移入移出,样式修改,显示隐藏提示消息
- 鼠标移入就显示弹框,移出弹框就消失
- js实现鼠标的移入移出控制图片的明暗显示
- css中将鼠标放到一个div上显示出另一个隐藏的div
- ExtJS:鼠标移出菜单后菜单自动隐藏
- 003鼠标点击——显示/隐藏列表
- 鼠标移入侧边栏一级菜单后,二级菜单显示
- Selenium操作示例——鼠标悬停显示二级菜单,再点击二级菜单或下拉列表