`
highfly-s
  • 浏览: 100407 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

悬浮显示隐藏

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ padding:0; margin:0;}
body{ width:100%; height:800px;}
ul{ list-style:none;}
.wrap{ width:60px; position:relative;}
.wrap a{ height:16px; line-height:16px; display:block;}
.container{ display:none; width:150px; position:absolute; left:0; top:22px; border:1px solid #ccc;}
-->
</style>
<script type="text/javascript" src="http://js.letvcdn.com/js/201302/27/1630/www/core_min.js"></script>

</head>

<body>
<div class="wrap">
      <a href="#">应用</a>
      <div class="container">
          <ul>
              <li>礼物</li>
              <li>礼物</li>
              <li>礼物</li>
              <li>礼物</li>
          </ul>
      </div>
</div>
<script type="text/javascript">
$('a').click(function(){$('.container').show();});

var timer = null;
  $('.wrap a').hover(function(){
    clearTimeout(Timer);
    //$(".container").show();                      
  },function(){
     Timer = setTimeout(function(){
         $(".container").hide();
     },200);
  });
$(".container").mouseover(function(){
    clearTimeout(Timer);
   $(".container").show();   
})
$(".container").mouseout(function(){
  Timer = setTimeout(function(){
     $(".container").hide();
  },200);
})
</script>

</body>
</html>

分享到:
评论

相关推荐

    鼠标移动到文字上方显示悬浮菜单支持显示与隐藏

    鼠标移动到文字上方显示悬浮菜单支持显示与隐藏,当鼠标移动到文字上方,弹出悬浮菜单,鼠标移出文字或移出悬浮菜单,菜单隐藏

    鼠标经过显示隐藏信息

    本篇文章主要介绍了一种通过jQuery实现的鼠标悬浮显示隐藏信息的技术。此技术可以用于在网页上添加额外的信息提示,类似于HTML元素中的`title`属性,但更为灵活和动态。本文将深入解析这段代码的工作原理、实现方法...

    AutoJs源码-悬浮窗控件隐藏真容易

    AutoJs源码-悬浮窗控件隐藏真容易。本资源购买前提醒:本源码都是实际autojs项目模板,安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您...

    swift-HSFFloatingView-控件全局悬浮延时隐藏

    在Swift编程语言中,开发UI相关控件时,有时我们需要创建一种可以全局悬浮并在特定条件下自动隐藏的视图。HSFFloatingView就是这样一个专为这种需求设计的自定义控件。这个控件允许开发者在应用的任何界面中实现类似...

    js鼠标悬浮显示详细内容

    在网页设计中,"js鼠标悬浮显示详细内容"是一种常见的交互功能,它允许用户将鼠标悬停在某个元素上时,展示与该元素相关的详细信息。这种效果通常用于数据列表、图片缩略图或者菜单项,以提供更多的上下文信息,而...

    echarts x轴文字过长悬浮显示.rar

    功能描述: x轴文字显示过长会影响柱状图显示不全,需要对文字进行处理,为了美观,限定文字只显示在一行,文字长度为4;当长度大于4时将第四个文字替换为"...";...当鼠标移出"..."时,悬浮显示内容消失。

    android 悬浮窗全屏显示,锁屏页面悬浮窗全屏显示

    在Android开发中,实现一个能够全屏显示并覆盖导航栏和状态栏的悬浮窗,以及在锁屏页面依然保持全屏显示,是一项涉及到系统权限、窗口管理服务和自定义视图的技术挑战。以下是对这个主题的详细解释: 1. **悬浮窗...

    Qt实现窗体在显示屏旁边自动隐藏/显示

    "Qt实现窗体在显示屏旁边自动隐藏/显示"这个话题涉及到的是如何让一个Qt窗口根据用户的操作或者系统状态,智能地出现在屏幕边缘或者隐藏起来,提供一种类似QQ等即时通讯软件的用户体验。这种功能可以增加应用的便捷...

    jquery 鼠标移入显示悬浮框

    同时,也需要在`mouseleave`事件上绑定函数,隐藏悬浮框: ```javascript .mouseenter(function() { showTooltip($(this).data('tooltip')); }) .mouseleave(function() { hideTooltip(); }); ``` 这里的`$...

    Axure教程:APPPC页面悬浮按钮显示与隐藏效果.docx

    Axure 教程:APP/PC 页面悬浮按钮显示与隐藏效果 本教程旨在指导用户如何使用 Axure 创建一个悬浮按钮显示与隐藏效果,适用于 APP/PC 页面。通过本教程,用户可以学习如何使用 Axure 的动态面板和热区元件来实现...

    绿色悬浮隐藏点击显示在线QQ客服.zip

    本文将详细介绍一种名为“绿色悬浮隐藏点击显示在线QQ客服”的代码实现,该代码设计简洁,适用于网页中,且具有良好的浏览器兼容性。 首先,我们关注的是“绿色悬浮”这一特性。在网页设计中,悬浮元素通常是固定在...

    jquery悬浮层,鼠标悬浮动态添加显示内容

    现在,我们使用jQuery来监听鼠标悬浮(`mouseenter`)和离开(`mouseleave`)事件,并根据这些事件来控制悬浮层的显示与隐藏。这里是一个基本的实现: ```javascript $(document).ready(function() { $('.hover-item')...

    鼠标悬浮显示放大图标

    在网页设计中,"鼠标悬浮显示放大图标"是一种常见的交互设计技术,主要用于增强用户体验,让用户在不离开当前页面的情况下预览图像的细节。这个功能在电商网站、产品展示页面等场景下尤为常见。通常,当用户将鼠标...

    jQuery侧边悬浮窗口折叠显示隐藏文字列表效果代码

    总结来说,实现"jQuery侧边悬浮窗口折叠显示隐藏文字列表效果代码"需要结合HTML、CSS和jQuery的知识,通过DOM操作、事件处理、CSS属性控制和动画效果,为用户提供一个互动性强且视觉效果良好的侧边栏功能。...

    android桌面悬浮窗

    一个`FloatingWindowService`服务,用于管理悬浮窗的显示与隐藏;以及可能有的权限申请(如`&lt;uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/&gt;`)。 为了提高用户体验,悬浮窗还可以添加...

    jquery左边悬浮显示菜单

    "jQuery 左边悬浮显示菜单"是一个实现这一目标的有效工具。jQuery,作为一款强大的JavaScript库,简化了DOM操作,事件处理以及动画效果,使得开发人员可以轻松地创建交互式网页。在这个例子中,我们将深入探讨如何...

    js特效鼠标悬浮显示大图

    在网页设计中,为了提升用户体验,常常会使用各种JavaScript特效,其中之一就是“鼠标悬浮显示大图”功能。这种效果使得用户在浏览网页时,当鼠标悬停在小图上时,能够快速预览与之对应的大图,无需点击跳转,从而...

    C# 屏幕显示悬浮滚动字幕.zip

    "C# 屏幕显示悬浮滚动字幕.zip"是一个针对C#编程语言的项目,它提供了在屏幕上实现悬浮滚动字幕的功能。这个功能对于软件测试或者用户交互有着独特的应用场景,可以在不干扰软件主流程的情况下提供额外的信息提示。 ...

    jquery鼠标经过图片显示悬浮按钮图片特效.zip

    本教程将探讨如何利用jQuery实现一个鼠标经过图片时显示悬浮按钮的图片特效,这在网页互动性和用户体验方面有着显著的提升。我们将深入讨论相关的jQuery代码、HTML结构以及CSS样式,来帮助你创建一个类似的图片相册...

    监听列表滚动来隐藏或显示Toolbar与浮动按钮

    在Android应用开发中,我们经常需要根据用户交互来动态调整界面元素的可见性,例如当用户滚动列表时,隐藏或显示顶部的ToolBar以及悬浮动作按钮(Floating Action Button, FAB)。这种效果能提供更好的用户体验,...

Global site tag (gtag.js) - Google Analytics