用jQuery实现鼠标滑入输入框显示出隐藏的div,且可以对显示出的div操作,滑出输入框和显示的div后隐藏

问题描述

如图的效果,注 显示的隐藏div不占用页面布局,可以详细的吗?

解决方案

很简单啊,代码没有,只提供思路监听输入框的鼠标悬浮和离开事件,显示和隐藏div就行了div上也加入相同的鼠标悬浮和离开事件,样式什么的自己处理吧,都是基础

时间: 2024-08-30 06:35:02

用jQuery实现鼠标滑入输入框显示出隐藏的div,且可以对显示出的div操作,滑出输入框和显示的div后隐藏的相关文章

jquery实现鼠标滑过小图时显示大图的方法

 这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <

JQuery实现鼠标滑过显示导航下拉列表_jquery

当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="

jQuery实现鼠标滑过延时显示的效果

WEB开发人员有时候经常用到延时操作的用户交互事件,比如聚美优品网站首页的产品展示,当鼠标移入产品1秒钟后,会显示产品的详情,而不希望用户的鼠标指针刚刚移入元素就显示详情,对于不希望显示详情的用户来说,达到了友好的交互作用,下面就要使用jQuery的计时器setTimeout,具体代码如下: 例1.jQuery实现鼠标滑过延时显示的效果 HTML代码  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

jquery实现鼠标滑过显示二级下拉菜单效果_jquery

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

jquery实现鼠标滑过显示提示框的方法_jquery

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

jQuery实现鼠标滑过Div层背景变颜色的方法

 这篇文章主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="

js-请问如何通过JS或者jQuery实现鼠标滑到某个div上 页面向左滑动 滑出则停止 向右同理

问题描述 请问如何通过JS或者jQuery实现鼠标滑到某个div上 页面向左滑动 滑出则停止 向右同理 如题. 我在页面上弄了两个div,一个是向左按钮一个是向右按钮. 页面属于左右滑动型. 如何实现鼠标滑到向左的那个div上 页面向左滑动 滑出则停止 向右同理? 谢谢各位大神!拜谢!! 拜托各位看清我的问题好吗,头两个答案根本牛头不对马嘴>.< 我说的是让页面滑动.另外,如果有代码最好--谢谢 解决方案 .on{height:50px;background:#eee}.dd{backgrou

jQuery实现鼠标滑过Div层背景变颜色的方法_jquery

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

jquery实现鼠标滑过后动态图片提示效果实例_jquery

本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {

jquery实现鼠标滑过小图查看大图的方法_jquery

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: <style type="text/css"> ul{ list-style:none; } li{ float:left; margin-left:10px; } img{ border:#CCCCCC solid 1px; } #max{ position:absolute; display:none; /*隐藏层*/ } </style>