`

鼠标悬浮出现下拉信息

阅读更多
/*--------------html代码-------------*/
<div id="navigation">

    <div id="user-list" >
       <div class="user">
<div id="tu1"></div>
<div id="username">张三</div>
<div id="time">2013-6-3</div>
  </div>
        <div id="user-list-bd" >
          <li>
<a href="#">信息浏览</a>
</li>
<li>
<a href="#">信息修改</a>
</li>
<li>
<a href="#">密码修改</a>
</li>
<li>
<a href="#">退 出</a>
</li> 
        </div>
    </div>

</div>


/*----------------css代码--------------------*/

#navigation{ width:220px; height:27px; background:url(../images/navigation.png) no-repeat;margin-left:-8px; padding-top:5px; margin-top:-10px;}
#user-list{position:absolute;width:135px; height:16px; margin-left:23px; margin-top:15px;}
.user{position:relative;width:153px; height:16px; margin-left:13px; margin-top:-15px; cursor:pointer; overflow:hidden;}
.user #tu1{ width:12px; height:7px; background:url(../images/tu1.png) no-repeat; margin-top:5px; overflow:hidden;}
.user #username{ font-family:"黑体"; font-size:14px; color:#FFFFFF; padding-left:20px; margin-top:-12px;}
.user #time{font-family:"黑体"; font-size:14px; color:#FFFFFF; margin-left:80px; margin-top:-16px;}

#user-list-bd{ background:#3366cc; position:relative;width:152px; height:100px;  margin-top:6px; margin-left:10px; border-left:1px solid #999999;border-right:1px solid #999999;border-bottom:1px solid #999999;}
#user-list-bd li{ list-style:none;margin-top:5px;}
#user-list-bd li a:link,#user-list-bd li a:visited{ text-decoration:none; font-size:12px; color:#FFFFFF;margin-left:30px;}
#user-list-bd li a:hover{ text-decoration:underline; }


/*-------------------------jquery代码----------------------*/

$(document).ready(function(){
$("#user-list-bd").hide();
var lr_systembtn = $("#user-list");
var lr_menu = $("#user-list-bd");
lr_systembtn.mouseenter(function(){
t_delay= setTimeout(function(){
lr_menu.fadeIn();
},200);
});
lr_systembtn.mouseleave(function(){
clearTimeout(t_delay);
lr_menu.fadeOut();
});
});


  • 大小: 27.5 KB
分享到:
评论

相关推荐

    jquery鼠标悬浮滑动下拉二级菜单代码

    在网页设计中,交互性和用户体验是非常重要的因素,而下拉菜单是提高用户导航效率的常见设计元素。...通过学习和理解这个例子,你应该能够掌握创建jQuery鼠标悬浮滑动下拉二级菜单的方法,并能将其应用到自己的项目中。

    Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    总结来说,通过禁用默认的`click.bs.dropdown.data-api`事件并添加鼠标悬停事件处理,我们可以在Bootstrap的导航条上同时实现点击链接和鼠标悬停显示下拉菜单的功能。这样,用户既可以方便地访问链接,也能快速浏览...

    Jquery+div+css鼠标经过下拉菜单

    在本例中,jQuery用于监听用户的鼠标经过事件,当鼠标悬停在特定的div元素上时,触发下拉菜单的显示或隐藏。 HTML的div元素是网页布局的基本构建块,它是一个通用容器,可以包含其他HTML元素。在这个例子中,div被...

    JavaScript实现HTML导航栏下拉菜单

    前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐。其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素...

    jquery鼠标悬停滑动下拉菜单代码.zip

    本资源“jquery鼠标悬停滑动下拉菜单代码.zip”提供了一种使用jQuery实现的蓝色风格下拉菜单解决方案,特别适用于那些希望增强用户体验的网站。 1. **jQuery简介**:jQuery是一个广泛使用的JavaScript库,它简化了...

    css3实现的鼠标悬浮3D转动二级下拉导航菜单动画特效源码.zip

    在本例中,我们关注的是一个利用CSS3实现的特殊效果——鼠标悬浮时3D转动的二级下拉导航菜单动画。这种效果可以为用户界面增添互动性和视觉吸引力,使网站看起来更现代且专业。 首先,让我们详细了解一下CSS3中的...

    鼠标划过comboBox下拉子项,即时改变字体大小

    在这个特定的场景中,我们面临一个需求,即当用户将鼠标悬停在ComboBox的下拉列表中的某一项时,该项的字体大小应实时变化。这涉及到事件处理和UI动态更新的技术。 首先,我们需要了解ComboBox的基本结构。ComboBox...

    vue实现鼠标移过出现下拉二级菜单功能

    我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似 后来参加工作了 公司一直在用vue 所以很多用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单  我也曾想着就...

    JS仿京东商城菜单,下拉弹出框菜单

    例如,使用`transition`属性可以实现平滑的过渡效果,使得菜单的出现和消失更加自然。 4. **延迟显示**:为了防止用户快速移动鼠标时频繁切换子菜单,我们可以设置一个短暂的延迟,只有当鼠标在菜单项上停留一定...

    UGUI鼠标悬停提示信息

    在UGUI中,实现鼠标悬停提示信息是一种常见的交互设计,可以提高用户体验,让用户更加直观地了解UI元素的功能或状态。 首先,要实现鼠标悬停提示信息,我们需要使用Unity中的`EventSystem`、`CanvasGroup`和`Text`...

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    javascript仿京东导航左侧分类导航下拉菜单效果

    `display:none`隐藏了默认状态下的下拉菜单,`display:block`则在鼠标悬停时显示下拉菜单。 ```css .ul { position: relative; } .ul li { height: 24px; line-height: 24px; border-bottom: 1px solid #ddd; ...

    jquery导航栏样式鼠标悬停二级下拉菜单代码

    jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码

    HTML5/CSS3自定义浮动Select 超炫下拉菜单动画

    在CSS3菜单栏目中,我们分享了很多...今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单,这个CSS3菜单利用CSS3特性可以浮动在网页上,并带有阴影效果,同时,展开下拉框时会弹出一个二级菜单,效果非常不错。

    HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码

    例如,当用户鼠标悬停在菜单按钮上时,可以通过应用`transition`属性来平滑地改变元素的样式,比如改变阴影效果、颜色或者大小。这里提到的“浮动”效果可能是通过设置`position`属性(如`relative`或`absolute`)和...

    js鼠标滑过展开下拉菜单

    在网页设计中,导航菜单是用户与网站交互的重要部分,而使用JavaScript实现的鼠标滑过展开下拉菜单是一种常见的交互效果。这种效果可以提高用户体验,使用户更容易地浏览和访问网站的各个部分。本文将详细讲解如何...

    jQuery阿里巴巴顶部导航栏下拉菜单.zip

    下拉菜单通常通过绝对定位(`position: absolute`)相对于其父元素进行显示,以便在鼠标悬停时出现在正确的位置。 - **悬停样式**:通过CSS选择器(如`:hover`)改变鼠标悬停在菜单项上的样式,如改变背景色、字体...

    遮罩下拉导航.zip

    在遮罩下拉导航中,jQuery主要用于监听用户的鼠标事件,如mouseover(鼠标悬浮)和click(点击),并根据这些事件触发相应的功能,如显示或隐藏下拉菜单。 响应式设计是现代网页设计的关键,确保网站在不同设备和...

    jquery鼠标悬停缓慢下拉导航

    "jQuery鼠标悬停缓慢下拉导航"是一种增强用户体验的交互设计技术,通过使用JavaScript库jQuery,当用户将鼠标指针悬停在主菜单上时,下拉子菜单会以平滑、缓慢的效果出现,提升网站的专业感和视觉吸引力。...

Global site tag (gtag.js) - Google Analytics