鼠标移入显示一个菜单列表移出隐藏

_Nutra

已于 2022-10-20 09:31:17 修改

阅读量4.3k

点赞数

文章标签： mouseover mouseout

于 2013-10-21 23:52:14 首次发布

本文链接：https://blog.youkuaiyun.com/lling66/article/details/12923971

版权

本文介绍了一种使用HTML和jQuery实现的鼠标悬停显示菜单并移出时隐藏的效果。通过简单的HTML结构配合jQuery事件监听，实现了图片上悬浮时显示下拉菜单列表的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标移动到图片显示一个菜单列表。移出隐藏菜单列表。

html部分

<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");
  });
 });