鼠标点击其他地方隐藏效果

2024-09-07

jQuery实现鼠标点击div外的地方div隐藏消失的效果

css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} </style> 样式与JS部分: <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&q

点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div").click(function(e){ e.stopPropagation();});$(document).click(function(){ $("#div").hide();});实现了点击其它地方隐藏div后遇到了另一个问题.我的div内部使用了bootstrap的tab组件,di

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="container"> <img src="images/1.jpeg" alt="1" /> <img src="images/2.jpeg" alt="2" /> <img s

Jquery手机点击其他地方隐藏控件问题

因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: //点击其他地方隐藏下拉菜单 document.onclick = function(){ $("#defaultTab_submenu").hide(); $("#wgmenu_submenu").hide(); $("#zcmenu_submenu"

jquery实现除指定区域外点击任何地方隐藏DIV

<div class="layui-input-block expression-box"> </div> <div class="layui-input-block" style="width: 600px; margin: 0 auto; border-left: 1px solid #4a4f58; border-right: 1px solid #4a4f58;"&

Web前端鼠标悬停实现显示与隐藏效果

css定义,偏移量,相对定位,绝对定位显示与隐藏二维码相对于微信图标定位鼠标悬停微信图标上显示鼠标离开微信图标时隐藏什么是定位,就是定义网页标签在运行时显示的位置 css提供Position属性用于指定元素在网页中定位的方式 background-position: 设置背景图片的显示位置 [外链图片转存失败(img-daNNPv7C-1564158585452)(https://upload-images.jianshu.io/upload_images/11158618-58639

jquery点击其他地方隐藏div层的实现程序

js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) { $(".language_list").toggle(); e.stopPropagation(); //阻止事件冒泡,否则事件会冒泡到下面的文档点击事件 }); //点击文档时,隐藏语言列表 $(document).click(function() { $("

CSS样式鼠标点击与经过的效果一样

a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */ a:hover /* 当有鼠标悬停在链接上 */ a:active /* 被选择的链接 */ a,a:visited,a:hover,a:active { /*全部状态都一样的效果*/ text-decoration: none; /*没有下划线*/ color: blue; /*一直都蓝色*/ font-weight: bold; /*加粗*/ }

js 冒泡事件点击任意地方隐藏元素

$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || e; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } }); $("#UL").click(function (e) { /*阻止冒泡事件*/ e = window.event

vue 点击其他地方隐藏dom

document.addEventListener('click', function (e) { if (document.getElementsByClassName('keywordContainer')[0]) { if (!document.getElementsByClassName('keywordContainer')[0].contains(e.target)) {//这句话是说如果我们点击到了class为keywordContainer以外的区域 app.isShowItem

jq冒泡之——点击其他地方隐藏

e.stopPropagetion(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jque

点击其他地方隐藏div

document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueShow'){ document.getElementById("valueShow").style.display = "none"; val.style.height = '20px'; } };

超强的纯 CSS 鼠标点击拖拽效果

背景鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样: 但是,可以看到,上面的效果中,元素的移动不是很丝滑.如果你了解上述的实现方式,就会知道它存在比较大的局限性. 本文,我们还是仅仅通过 CSS,来实现一种丝滑的鼠标点击拖动元素移动的效果. 鼠标点击拖拽跟随效果 OK,什

工作当中实际运用（3）——js原生实现鼠标点击弹出div层在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现鼠标点击弹出隐藏 div隐藏

原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按钮显示再点击空白地方隐藏</title> <style type="text/css"> #div { border: 1px solid red; display: flex; align-items: center; justify-content: cente

jquery实现点击页面其他地方隐藏指定元素

代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>点击页面其他地方隐藏div-蚂蚁部落</title><style type="text/css"&

android 实现点击listview 空白地方隐藏菜单

思路:重写ListView的setOnTouchListener事件: ListView.setOnTouchListener(new OnTouchListener(){ @Override public boolean onTouch(View arg0, MotionEvent arg1) { // TODO Auto-generated method stub hideMenu();//隐藏菜单 return false; } }); 延申: 点击窗体空白地方隐藏菜单或软键盘思路一样:

Android点击EditText文本框之外任何地方隐藏键盘的解决办法

1,实现方法一:通过给当前界面布局文件的父layout设置点击事件(相当于给整个Activity设置点击事件),在事件里进行键盘隐藏 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/traceroute_rootview" android:layout_width="fill_parent" android:l

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

鼠标点击输入框文字消失 value placeholder 以及JQ实现效果（仿京东的输入框效果）

鼠标点击输入框文字消失 value实现方法 placeholder实现方法以及JQ实现placeholder效果 <input type="text" value="请输入手机号" id="demo" class="inp-fon"> <input type="text" value="请输入银行卡号" id="demo" class=&

由点击页面其它地方隐藏div所想到的jQuery的delegate

对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件冒泡, 事件冒泡 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素 Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反 DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发

鼠标点击其他地方隐藏效果

热门专题