div设置display为none鼠标点击事件问题

两个div交替隐藏显示,设置display属性为none,通过删除或添加样式能设为隐藏和显示。我点击显示div的时候,怎么触发了隐藏div的事件啊。这是什么原因啊?求大神告知,怎么避免这种事发生啊。

1个回答

贴代码看看,看代码才知道你哪里错

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何用js和css实现两个div之间的互联操作
![这是假设图](https://img-ask.csdn.net/upload/201709/12/1505180448_701725.png) **#如上图的div1 和div 2两个块是相互独立的,div2的初始状态是不显示,display为none, ,当鼠标移动到div1元素中时,div2显示。但是当鼠标离开div1并且不进入div2时,div2消失。 如果鼠标离开div1进入div2,div2保持显示状态。如果鼠标离开div2,进入div1,div2继续显示。如果鼠标离开div2并且不进入div1,div2消失。**
请求大佬支援!!!display:block和display:none在一起的时候不是会覆盖none吗?
## 我的display:block没有覆盖display:none ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557294754_120425.png) ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>tab栏切换</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*去除页面原有边距*/ margin: 0; padding: 0; } .wrapper{/*定义标题盒子*/ width: 326px; height: 29px; margin: 100px auto; border: 1px solid red; } .products{/*定义产品盒子*/ width: 1200px; height: 500px; margin: 0px auto; border: 1px solid #931CBB; } .tab-item{/*标题栏设置*/ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } .active{/*标题栏选中状态*/ border-top: 3px solid red; } .selected{/*显示产品*/ display: block; } .main{/*隐藏产品*/ display: none; } img{/*定义图片*/ float: left; width: 600px; height: 250px; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> </div> <div class="products"> <div class="main"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/2.png"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/5.png"> <img alt="" src="../../../图片/黄昏少女/11.png"> <img alt="" src="../../../图片/黄昏少女/8.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/1.png"> <img alt="" src="../../../图片/黄昏少女/2.png"> <img alt="" src="../../../图片/黄昏少女/3.png"> <img alt="" src="../../../图片/黄昏少女/4.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> </div> </div> </body> <script> // 需求1:给tab栏的每一个li标签设置鼠标移入事件:当前li添加active类,其他的兄弟li移除active类 // 需求2:给当前索引栏引入一致的div,让他添加selected类,其他的兄弟div移除selected类 $(function(){ $('.tab>.tab-item').mouseenter(function(){ $(this).addClass('active').siblings('li').removeClass('active'); // 获取当前这个li标签的索引 var index1=$(this).index(); console.log(index1); // 需求2: $('.products>.main').eq(index1).addClass('selected').siblings('div').removeClass('selected'); }); $('.tab>.tab-item').mouseleave(function(){ $(this).removeClass('active'); }); }); </script> </html> ```
求助,大神帮忙看一下
我是设置了div的失焦点事件 <div class="w" id="btn" style="display:none;"onmouseout="closeLeftDiv()">, div中还包含两个input,当鼠标移动到按钮上时也执行了失焦点事件, 怎么解决呀大神们
js设置div可以拖动之后 div里面的input无法输入
本问题的解决方法:根据鼠标点击的标签名判断是否可以拖动。谢谢各位!另外还找到一种不太好的方法,就是给input加上一个默认的焦点,即使用$(input).focus(),有用但,不够灵活。 ``` document.getElementById("log_window").onmousedown = function (e) { var obj = document.elementFromPoint(event.clientX, event.clientY); if (obj.tagName.toLowerCase() === 'input' || obj.tagName.toLowerCase() === 'textarea') { return false; } getObject(this, e || event); }; ``` 大概代码如下: ``` <style type="text/css"> #div_add { HEIGHT: 796px; WIDTH: 1420px; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.1; filter: alpha(opacity=10); display:none; } #log_window { BORDER-LEFT-WIDTH: 1px; CURSOR: default; FONT-SIZE: 9pt; HEIGHT: 200px; BORDER-RIGHT-WIDTH: 1px; WIDTH: 550px; BORDER-BOTTOM-WIDTH: 1px; POSITION: absolute; LEFT: 435px; Z-INDEX: 10002; TOP: 123px; BORDER-TOP-WIDTH: 1px; display:none; background-color:#ffffff; }</style> ``` ``` <div id="div_add"></div> <div id="log_window" style="width:550px;height:200px;top:123px;left:435px;"></div> ``` ``` <script> function shield(){ var html=''; html+='<input id="ipt_qty" value="" type= "text" />'; $('#log_window').html(html); } //下面是设置div可以拖动,现在不可以输入,屏蔽之后input可以输入 var o,X, Y; function getObject(obj, e) { o = obj; document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE); X = e.clientX - parseInt(o.style.left); Y = e.clientY - parseInt(o.style.top); } document.getElementById("log_window").onmousedown = function (e) { getObject(this, e || event); }; document.onmousemove = function (dis) { if (!o) { return; } if (!dis) { dis = event; } o.style.left = dis.clientX - X + "px"; o.style.top = dis.clientY - Y + "px"; }; document.onmouseup = function () { if (!o) { return; } document.all ? o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP) o = ''; }; </script> ``` 这个代码需要在IE下运行。这只是我的部分代码,还有很多代码感觉贴出来没有用。大概都是这样的。在网上找到一个方法,就是设置拖拽以后给input加一个焦点,这样是可以输入的,但是鼠标无论放在哪个位置拖动整个div都跟着拖动,还有按钮button的点击样式和经过样式都没有了,怎么写才可以像平时打开的网页一样只可以拖动标题那一栏啊。 还有input框用js写的onblur验证都没有触发。
JS 控制div 的显示和慢慢隐藏
我主要是想实现一个浮动窗体,当触发某种事件后div显示出来(默认为隐藏的),等几秒后又会隐藏,但是当鼠标进入该div后,div又一直显示,离开后才会慢慢隐藏,这该怎么实现呢,有人知道吗?? 我的代码如下: <style type="text/css"> #div1 { width: 200px; height: 200px; border: 1px solid red; font-family: "华为楷体"; display: none; } </style> <script type="text/javascript"> function clicks() { $("#div1").show(); setTimeout(function () { $("#div1").fadeOut("slow"); }, "1000"); } function mouse() { clicks(); } </script> <input type="button" id="btn1" value="确认" onclick="clicks()" /> <div id="div1" onmouseover="mouse()"> </div>
请问为什么“会员中心”和“去购物车结算”没有跟“搜索”对齐呢?
<!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"> body,ul,input,p,dl,dt,dd,h1{ margin:0; padding:0;} body{ min-width:755px; color:#6c6c6c; font-size:12px;} ul{ list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .left{ float:left;} .right{ float:right;} #top{ height:30px; line-height:30px; background:#f7f7f7; border-bottom:1px solid #eee; } #top ul{ margin:0 20px; } #top li{ float:left; padding:0 5px 0 0;} #top .line{ color:#ccc;} #top .top_nav{ max-width:1220px; margin:0 auto;} .right li{ cursor:pointer;} .right li span{ padding:0 9px;} #header{ width:1220px; margin:0 auto; padding-top:20px; overflow:hidden; } #header a{ width:240px; display:block; } #header #search{ width:500px; margin-top:15px; } #header #search input{ width:416px; height:30px; border:3px solid #e4393c; } #header #search .search_btn{ width:78px; height:36px; background:#e4393c; font-size:14px; font-weight:700; color:#fff; cursor:pointer; } #header #search p{ color:#999; font-size:12px; margin-top:5px; } #hear #info{ margin-top:18px; margin-left:20px; } #header #info input{ height:32px; border:1px solid #e3e3e3; background-color:#f7f7f7; color:#666; padding:0 10px; margin-right:12px; } .right .u100{ position:relative;} .right #u101{ width:95px; display:none; position:absolute; left:0; top:30px; background-color:#fff; border:thin; border-color:#eee; } .right #u101 a{ display:block; padding:0 10px; line-height:28px; color:#6c6c6c; } .right #u101 a:hover{ background:#f5f5f5;} </style> <script type="text/javascript"> function change(myId,mode){ document.getElementById(myId).style.display=mode; if(mode=='block'){ //设置下拉菜单所在div的边框 document.getElementById(myId).style.border="1px solid #eee"; document.getElementById(myId).style.borderTop="none"; //设置鼠标划过的li的边框及背景颜色 document.getElementById(myId).parentNode.style.backgroundColor="fff"; document.getElementById(myId).parentNode.style.border="1px solid #eee"; document.getElementById(myId).parentNode.style.borderBottom="none"; } else{ //当不显示下拉列表时,鼠标划过的li的边框及背景颜色 document.getElementById(myId).parentNode.style.backgroundColor=""; document.getElementById(myId).parentNode.style.border=""; } } </script> </head> <body> <!-- 传智商城菜单栏 --> <div id="top"> <ul class="top_nav"> <li>亲,请登录</li> <li>免费注册</li> </ul> <ul class="right"> <li> <li class="u100" onmouseover="change('u101','block')" onmouseout="change('u101','none')"> <span>我的商城</span> <div id="u101"> <a>已买到的宝贝</a> <a>我的足迹</a> <a>我的上新</a> <a>啦啦啦</a> <a>噢噢噢噢</a> <a>哈哈</a> </div> </li> </li> <li class="line">|</li> <li><span>购物车</span></li> <li class="line">|</li> <li><span>收藏夹</span></li> <li class="line">|</li> <li><span>卖家中心</span></li> <li class="line">|</li> <li><span>联系客服</span></li> </ul> </div> <!--传智商城主体-->![图片说明](https://img-ask.csdn.net/upload/202002/13/1581607145_511523.png) <div id="header"> <a class="left"><img src="../images/5_ (1).gif" /></a> <div id="search" class="left"> <input type="text" class="left" /> <input class="search_btn" type="button" value="搜索" /> <p>热门搜索:网页培训 大学教材 智能手机 平板电脑</p> </div> <div id="info" class="left"> <input type="button" value="会员中心" /> <input type="button" value="去购物车结算" /> </div> </div> </body> </html> ``` ```
div层触发的问题?
<html> <head> <title>testing...</title> </head> <body style="text-align:center;"> <center> x:<input type="text" id="x_id" value="" /> y:<input type="text" id="y_id" value="" /> </center> <!-- body 中的 text-align:center; 以及 div 中的 margin:0px auto; 是为了让 div 居中 --> <div id="div_1" onMouseOver="showTip(event)" onMouseOut="hideTip()" style="margin:0px auto;text-align:left;width:600px;height:60px;background-color:#DFE8F6;"> <a href="www.baidu.com">我晕我怎么不行呢?</a> 与其在悬崖上展览千年,不如在爱人肩头痛哭一晚。<br /> 那弯弯的一轮新月,分明暗示着:怀抱着未来的圆满。<br /> </div> <div id="div_2" style="position:absolute;text-align:left;background-color:#808080;"> 生如夏花之灿烂<br /> 死如秋叶之静美<br /> 换我心,为你心,此知相忆深。<br /> </div> </body> <script type="text/javascript"> function showTip(evt){ evt = evt || window.event; var x,y; if(evt.pageX || evt.pageY){ // firefox x = evt.pageX; y = evt.pageY; }else{ // ie x = evt.clientX + document.body.scrollLeft - document.body.clientLeft; y = evt.clientY + document.body.scrollTop - document.body.clientTop; } // document.getElementById("x_id").value = x; document.getElementById("y_id").value = y; // 获取 div_1 的左下角坐标 var div_el = document.getElementById("div_1"); var div_left = div_el.offsetLeft; var div_top = div_el.offsetTop + div_el.offsetHeight; // 设置 div_2 的 左上角坐标 var div_tip = document.getElementById("div_2"); div_tip.style.display = ''; div_tip.style.left = div_left + "px"; div_tip.style.top = div_top + "px"; } function hideTip(){ var div_tip = document.getElementById("div_2"); div_tip.style.display = 'none'; } </script> </html> 问题:在div_1层里加了一个超链接,怎么让鼠标移动到超链接的时候,不触发hideTip()事件? [b]问题补充:[/b] 是啊是啊,会触发div_1的onmouseout 因为这是层里的超链接所以我不想触发onmouseout怎么办? [b]问题补充:[/b] 我想有这个监听的,但是,现在层里包含了其他的标签,鼠标移动到这个标签,就触发了层的onmouseout,我想这个时候不触发他,就是在鼠标在层里的东西里的时候 不触发他.不管层里是否是嵌套标签等 [b]问题补充:[/b] 用你的话说 我是想不让</a>这个标签不游离div_1这个层
帮我看下这个网页中的三个图片div的大小和位置怎么更改设置
我想更换几张大图,但是无论放多大的图片都会局限在这个边框里,怎么样才能更改所放图片的大小和位置呢? ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577260837_900227.png) 下边的图其实我放了一张很大的图,但是都会按比例缩放到这个位置,怎么才能更改默认图片的长宽?和位置? ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577260847_818926.png) ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3鼠标悬停图片遮罩层动画特效</title> <!--bootstrap布局框架--> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /> <!--字体图标样式--> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"> <style> body{background-color: #353535} .box { font-family: 'Ubuntu', sans-serif; overflow: hidden; position: relative; transition: all 0.3s; } .box:hover { box-shadow: 0 0 15px -5px #000; } .box:before { content: ''; background-color: transparent; background-image: radial-gradient(circle at 20% 80%, transparent 29%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 33%, transparent 34%), radial-gradient(circle at 80% 20%, transparent 29%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 33%, transparent 34%); background-size: 30px 30px; height: 100%; width: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; transition: all 0.3s ease 0.2s; } .box:hover:before { opacity: 1; } .box img { width: 100%; height: auto; transition: all 0.3s ease 0s; } .box:hover img { filter: blur(2px); } .box .box-content { color: #fff; background-color: rgba(0,0,0,0.6); text-align: center; width: 100%; height: 59%; padding: 18% 0 0 0; position: absolute; left: 0; top: -100%; z-index: 2; transition: all 0.3s ease 0s; } .box:hover .box-content { top: 0; } .box .title { color: #fff; font-size: 23px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0; } .box .post { color: #32c287; font-size: 14px; font-style: italic; text-transform: capitalize; letter-spacing: 2px; } .box .icon { background: rgba(50,194,135,0.6); text-align: center; height: 39%; width: 100%; padding: 15px 0 0; margin: 0; list-style: none; transform: translateX(50%); position: absolute; right: 50%; bottom: -100%; z-index: 1; transition: all 0.3s; } .box:hover .icon { bottom: 0; } .box .icon li { display: inline-block; margin: 0 3px; } .box .icon li a { color: #32c287; background-color: #fff; font-size: 18px; line-height: 40px; height: 40px; width: 40px; border-radius: 40%; display: block; transition: all 0.3s; } .box .icon li a:hover { color: #fff; background-color: #04a562; box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 5px rgba(0,0,0,0.5) inset; } @media only screen and (max-width:990px) { .box { margin-bottom: 30px; } } @media only screen and (max-width:479px) { .box .title { font-size: 20px; } } </style> </head> <body> <h4 style="text-align: center; color: aliceblue;line-height: 50px">CSS3图片鼠标悬停动画特效 <span>Hover Effect Style</span></h4> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-1.jpg" alt=""> <div class="box-content"> <h3 class="title">餐饮软件</h3> <span class="post">web developer</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-2.jpg" alt=""> <div class="box-content"> <h3 class="title">零售软件</h3> <span class="post">web designer</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-3.jpg" alt=""> <div class="box-content"> <h3 class="title">会员系统</h3> <span class="post">web developer</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源:<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html> ```
求一个JS显示隐藏层的代码
现有代码: <div class="1">....</div> <div class="2" style="display: none;">....</div> 点击class=1 时显示 class=2 层, 同时<div class="1">改变为<div class="1 hover">. 鼠标移开变回为默认的就是隐藏.
JS函数未定义 报错是缺少分号??
新手入门,恳请各位前辈指点,先谢谢各位了。 目前在看韩顺平老师的js视频教程,实现鼠标移动到不同位置,以切换到相应标签页。 代码如下,总是报错函数未定义,第九行缺少分号…… ``` <html> <head> <title>sohu</title> <link href="./sohu.css" type="text/css" rel="stylesheet"/> <script language="javascript" charset="GB2312"> function change(val){ window.alert("hha"); if(val=='1'){ div1.style.display: ""; div2.style.display: "none"; div3.style.display: "none"; }else if(val=='2'){ div2.style.display: ""; div1.style.display: "none"; div3.style.display: "none"; }else if(val=='3'){ div3.style.display: ""; div1.style.display: "none"; div2.style.display: "none"; } /* switch(val){ case '1': div1.style.display: "none"; div2.style.display: "none"; div3.style.display: "none"; break; case 2: div2.style.display: "none"; div1.style.display: "none"; div3.style.display: "none"; break; case 3: div3.style.display: "none"; div1.style.display: "none"; div2.style.display: "none"; break; }; */ } </script> </head> <body> <div class="div_bg"> <div id="div_left"> <ul> <li onmousemove="change('1')">广告</li> <li onmousemove="change('2')">广告</li> <li onmousemove="change('3')">广告</li> </ul> </div> <div class="div_right" id="div1"> <ul> <li><a href="">广告1广告1广告1广</a></li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> </ul> </div> <div class="div_right" id="div2" style="display: none"> <ul> <li>广告2广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> </ul> </div> <div class="div_right" id="div3" style="display: none"> <ul> <li>广告3广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> </ul> </div> </div> </body> </html> ```
父类div增加滚动条就无法正常显示子div
第一次在CSDN提问,各位前端的大神,本人前端菜鸟,碰到个自认为棘手的问题,求大家解惑,如下:有个大父类div(简称A),该div中动态push的是很多定高的菜单小父类div(简称B,具有position:relative属性),将鼠标放在B中使用mouseenter触发显示(show())原先display:none的子类div(简称C,具有position:absolute属性,有left:200px的属性,200恰好是B的宽度,将left调小,C就会左移显示出来),状态变为display:block,那么此时C就会因为有position上的关系原因,显示在比较正常的位置上。最近考虑到B的菜单过多导致不自适应屏幕的bug,所以在A上使用了overflow:auto属性新增了滚动条,但是问题就来了,将鼠标放在B上,C在F12中有display:block的属性,但是就没正常显示出来,本人试过将C的属性改为fixed,能显示但是位置错位,而且也很不好调,因为有多个动态push的B,C的高度还不一致,一个一个地调感觉很不智能很傻,求各位大神指点迷津。 补充图片和代码,谢谢大家:![monsecenter的代码](https://img-ask.csdn.net/upload/201611/23/1479889563_650688.png)![添加滚动条代码](https://img-ask.csdn.net/upload/201611/23/1479889544_550173.png)![添加滚动条后的情况](https://img-ask.csdn.net/upload/201611/23/1479889522_765248.png)![具体div层级结构](https://img-ask.csdn.net/upload/201611/23/1479889496_369977.png)
jquery 鼠标悬停显示信息提示框
jquery 鼠标悬停显示信息提示框,但是提示框会影响其他块的布局位置(其他块会向下滑动),要怎么修改才可以让提示框覆盖在最上层显示而不影响其他块的布局 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标悬停显示提示信息窗口</title> <meta http-equiv="content-type"> <style type="text/css"> .content{ display:none; width:250px; height:70px; border-radius:10px; padding:20px; position:relative; top:15px; left:80px; background-color:#2F4056; } </style> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contact").mouseover(function(){ $(".content").show("slow"); $(".contact").mouseout(function(){ $(".content").hide("slow"); }); }); }) </script> </head> <body> <a href="#" style="color: blue;float=left" class="contact">不再犹豫</a> <div class="content" style="color: white;"> 无聊望见了忧郁,达到理想不太易<br /><br /> 谁人定我去或留,定我心中的宇宙 </div> <div > 1无聊望见了忧郁,达到理想不太易<br /><br /> 谁人定我去或留,定我心中的宇宙 </div> </body> </html> ```
JavaScript 自动弹出菜单问题
``` html文档结构如下: <body> <div> <a href="3" class="meauLink" id="meau1">comedies</a> <ul class="meau" id="meau2"> <li><a href="page1.html">All is Well That Ends Well1</a></li> <li><a href="page1.html">All is Well That Ends Well2</a></li> <li><a href="page1.html">All is Well That Ends Well3</a></li> <li><a href="page1.html">All is Well That Ends Well4</a></li> </ul> </div> JS代码: function toggleMeau1() { var link = document.getElementById("meau1"); var link1 = document.getElementById("meau2").style; link.onmouseover = function() { link1.display = "block"; } //鼠标移动到链接上自动打开菜单 link.parentNode.onmouseout = function() { link1.display = "none"; }//鼠标移出层后自动关闭菜单 } 问题来了 鼠标离开链接后自动关闭了菜单,而我的原先设想是鼠标离开层后再自动关闭菜单。用css设置ul的display状态为none。鼠标移动到链接上打开的菜单难道就不算div的吗(这是本问题的重点,希望大神们详细解答下)?为了对比, 我又试了将代码改成进入层自动打开菜单,离开层关闭菜单,能达到鼠标离开层自动关闭菜单的效果。 ```
新人求助!!做网页做了一个二级菜单,但是一级菜单放不进去盒子,二级菜单不对齐一级菜单
## 我的style里面的代码是外部镶入的,并不是直接写上去的 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:450px; height:30px; border:1px solid red; margin:100px auto; /*盒子居中*/ } div ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left; height:50px; text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件,二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show();//show本质上还是更新display属性为block }); // 给一级菜单li设置鼠标离开事件,二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide();//hide本质上还是更新display属性为none }); </script> </html> ``` ```
jquery怎么实现多个事件相结合?
现在要实现这么一个需求,**点击按钮A,弹出菜单,再点击一次,菜单消失掉,或者鼠标移出 菜单范围 菜单消失**,求代码啊。 ``` <style> #a1{ width:100px; height:100px; border:red 1px solid; display:none; } </style> 1<div id="a1" >菜单</div>1 1<button>点击显示</button>1 ```
关于ajax和ssm框架之间传值的问题
这里是jsp中的代码 <script type="text/javascript"> $().ready(function() { $(".caidandanhang").mouseover(function(){ $(this).css("color", "#900"); $(".fenlei").css("display", "block"); var id=$(this).data("id"); $.ajax({ type:"post", url:"changetype", data:"id="+id+"", dataType:"json", success:function(data){ } }); }); $(".caidandanhang").mouseout(function(){ $(this).css("color", "#fff"); $(".fenlei").css("display", "none"); }); }); </script> 这里是controller的代码 @RequestMapping(value="/changetype",method={RequestMethod.POST,RequestMethod.GET}) public void changetype(Integer id){ List<YiCeng> list = bs.searchType(id); JSONArray json = JSONArray.fromObject(list); PrintWriter out=null; out.print(json); } 现在想实现的功能是 在我鼠标移上的时候展示这个分类里面所有的小分类 现在list拿到了我想展示的小分类 但是不知道怎么传到前台 然后前台怎么处理放到页面????求大神。。!!!!!!!! 附上 前台jsp 的完整代码:想把找到的list在id为fenlei的div中展示 <body bgcolor="#f6f6f6"> <!-- 可隐藏栏 --> <div id="yincangtiao"> <div id="yincang"> <a id="yincangtupian" target="_blank"></a> <div id="guanbi"> <a>&times;</a> </div> </div> </div> <div style="width: 100%;height: 30px;background-color: #e3e4e5;z-index:-1;position:absolute;"></div> <div style="width:1190px;margin:0 auto;position:relative;"> <div style="width:1190px;height:170px;margin:0 auto;overflow:hidden;"> <div id="selectChengShi"> <div>北京</div> <div>上海</div> <div>天津</div> <div>重庆</div> <div>河北</div> <div>山西</div> <div>河南</div> <div>辽宁</div> <div>吉林</div> <div>黑龙江</div> <div>内蒙古</div> <div>江苏</div> <div>山东</div> <div>安徽</div> <div>浙江</div> <div>福建</div> <div>湖北</div> <div>湖南</div> <div>广东</div> <div>广西</div> <div>江西</div> <div>四川</div> <div>海南</div> <div>贵州</div> <div>云南</div> <div>西藏</div> <div>陕西</div> <div>甘肃</div> <div>青海</div> <div>宁夏</div> <div>新疆</div> <div>港澳</div> <div>台湾</div> <div>钓鱼岛</div> <div>海外</div> </div> <div id="fuzhudiv1"></div> <!-- 图标 --> <div id="logo"> <a href="zhuye"><img src="images/logo.v2.png"> </a> </div> <!-- 横向登陆注册菜单等等 --> <div id="dingbu"> <div id="weizhi"> <a>北京</a> </div> <div id="dingbuyou"> <div id="dingbuyou1"> <div class="dingbuc1" style="width:135px;text-align: right;"> <% if (user == null) { %> <a id="nihaodenglu" href="login" style="color:#999999;"> 你好,请登录</a> &nbsp; <a id="zhuce" href="zhuce" style="color:#ed6463;">免费注册</a> <% } else { %><%=user.getUsername()%>,你好&nbsp; <a href="exit">注销</a> <% } %> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a id="wodedingdan" href="wodedingdan" style="color:#999999;">我的订单</a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a>我的京东 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-moreunfold"></use> </svg> </a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a id="jingdonghuiyuan" href="" style="color:#999999;">京东会员</a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a id="qiyecaigou" href="" style="color:#999999;">企业采购</a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a>客户服务 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-moreunfold"></use> </svg> </a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1"> <a>网站导航 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-moreunfold"></use> </svg> </a> </div> </div> <div id="dingbuyou1"> <div class="dingbuc1" style="margin-right:0px;border-width:0;"> <a>手机京东</a> </div> </div> </div> </div> <div id="zonghebox"> <div id="zongheboxshang"> <div style="width:686px;height:80px;float:left;"> <div id="sousuokuang"> <div id="shurukuang"> <input type="text" style="width:500px;height:32px;border:0px;font-size:14px;" /> </div> <div id="huizhaoxiangji"></div> <div id="sousuo"> <a><img src="images/sss.png" /> </a> </div> </div> <div id="redianci"> <a>买1送1</a><a>感恩母亲</a><a>低至5折</a><a>阿玛尼</a><a>2件199</a><a>儿童睡衣</a><a>妈妈鞋</a><a>吃货嘉年华</a><a>蓝牙键盘</a> </div> </div> <div id="wodegouwuche" onclick="location='gouwuche'"> <div id="gouwuchetubiao"></div> <div id="wodegouwuchezi"> <a>我的购物车</a> </div> </div> <div id="shoujierweima"> <img src="images/5912d52dNd0e40612.png" width="60px" height="60px"> </div> </div> <div id="zongheboxxia"> <div id="caidan"> <div class="caidanyoubiankuang" style="margin-left:25px;"> <a>秒杀</a> <a>优惠券</a> <a>闪购</a> <a>拍卖</a> </div> <div class="caidanyoubiankuang"> <a>服装城</a> <a>京东超市</a> <a>生鲜</a> <a>全球购</a> </div> <div class="caidanyoubiankuang" style="border:0px;"> <a>京东金融</a> </div> </div> <div id="guanggao1"> <a><img src="images/59154db4N9e9c2fa7.jpg" width="190px" height="40px"> </a> </div> </div> </div> </div> <div style="width:1190px;margin:0 auto;"> <div id="shangpinliebiao"> <div id="fenleikuang"></div> <div style="width:190px;height:450px;margin-top:15px;"> <%List<YiCeng> yicenglist=(List<YiCeng>)request.getAttribute("list"); for(int i=0;i<yicenglist.size();i++){ %> <div onclick="location.href='bookhomepage'" data-id=<%=yicenglist.get(i).getId()%> class="caidandanhang"><%=yicenglist.get(i).getName() %></div> <%} %> </div> </div> <div class="fenlei" style="width:700px;height:400px;display:none;z-index:1;background-color:#fff;border:1px black solid;position: absolute;left:200px;"> <% List<BigType> list = (List<BigType>) request .getAttribute("typelist"); for (int i = 0; i <list.size(); i++) { %> <div style="width:700px;height:50px;"> <div style="width:150px;height:50px;color:#666;font-size:14px;font-weight:bold;float: left;"> <%= list.get(i).getB_typename() %> </div> <ul style="list-style:none"> <%List<SmallType> slist=list.get(i).getList(); for(SmallType st:slist){ %> <li style="list-style:none;width:160px;height:50px;color:#666;font-size:14px;float: left;"> <%= st.getS_typename() %> </li> <%} %> </ul> </div> <%} %> </div> <div id="zhutu"> <div id="lunbotu"> <ul id="lunboimgUl"> <li><a href=""><img src="images/586b49bcNd786cb33.jpg" /> </a></li> <li><a href=""><img src="images/591011e4N103be08a.jpg" /> </a></li> <li><a href=""><img src="images/591015bdN4dc555a0.jpg" /> </a></li> <li><a href=""><img src="images/591048a4N7dd3f530.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" /> </a></li> </ul> <div id="icon"> <ul id="iconUl"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="zuojiantou" style="color:#FFF"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-back"></use> </svg> </div> <div id="youjiantou" style="color:#FFF"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-more"></use> </svg> </div> </div> <div id="zuotu"> <a><img src="images/59118ba6N72b56d4e.jpg!q90" /> </a> </div> <div id="youtu"> <a><img src="images/5914035bN928a1a08.jpg" /> </a> </div> </div> <div id="kuaijietongdao"> <div id="yonghu"> <div id="huanyingyonghu"> <div id="yonghutouxiang"> <img src="images/no_login.jpg" width="40px;" height="40px;" style="border-radius:40px;" /> </div> <div id="dengluzhuce"> <a>Hi,欢迎来到京东..</a><br /> <a href="">登录</a> <a href="">注册</a> </div> </div> <div id="xinrenfuli"> <a>新人福利</a> </div> <div id="PULShuiyuan">PULS会员</div> </div> <div id="cuxiaoguanggao"> <div style="width:160px;height:22px;margin:7px auto;font-size:12px;border-bottom:1px solid #e6e6e6;"> <div id="cuxiao"> <a>促销</a> </div> <div style="width:9px;height:16px;float:left;border-right:1px solid #dfe0e1;"></div> <div id="guanggao"> <a>广告</a> </div> <div id="gengduo"> <a href="">更多</a> </div> </div> <div style="font-size:12px;line-height:25px;margin-left:15px;"> <p> <a>爆款秒杀 低至五折</a> </p> <p> <a>京东健康母亲节关爱不打折</a> </p> <p> <a>抢4999,爆款手机买1送1</a> </p> <p> <a>母亲节,有爱就“购”了</a> </p> </div> </div> <div id="richangshenghuo"> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:0px -86px;"></div> <div class="shenghuowenzi"> <a href="">话费</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:0px -43px;"></div> <div class="shenghuowenzi"> <a href="">机票</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-44px -86px;"></div> <div class="shenghuowenzi"> <a href="">酒店</a> </div> </div> <div class="shenghuotubiao" style="border-right:0px;"> <div class="shenghuotu" style="background-position:-88px 0px;"></div> <div class="shenghuowenzi"> <a href="">游戏</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-88px -43px;"></div> <div class="shenghuowenzi"> <a href="">企业购</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:0px 0px;"></div> <div class="shenghuowenzi"> <a href="">加油卡</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-44px -43px;"></div> <div class="shenghuowenzi"> <a href="">电影票</a> </div> </div> <div class="shenghuotubiao" style="border-right:0px;"> <div class="shenghuotu" style="background-position:-88px -86px;"></div> <div class="shenghuowenzi"> <a href="">火车票</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-132px 0px;"></div> <div class="shenghuowenzi"> <a href="">众筹</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-132px -43px;"></div> <div class="shenghuowenzi"> <a href="">理财</a> </div> </div> <div class="shenghuotubiao"> <div class="shenghuotu" style="background-position:-132px -86px;"></div> <div class="shenghuowenzi"> <a href="">礼品卡</a> </div> </div> <div class="shenghuotubiao" style="border-right:0px;"> <div class="shenghuotu" style="background-position:-44px 0px;"></div> <div class="shenghuowenzi"> <a href="">白条</a> </div> </div> </div> </div> </div> </div> <div style="width:100%;background-color:#eaeaea;margin-top:0px;"> <div style="width:1190px;margin:0 auto;"> <img src="images/di.png" width="1190px;" height="500px;"> </div> </div> </body>
多个div浮窗的只有一个能移动的问题
同一个页面 显示多个div浮窗(多个浮窗的内容并不一样,也在不同的div中 演示代码里是只举例了一种) 只有一个能移动 请问那个是判断我现在移动的是哪个浮窗 ,怎么才能分别移动 不冲突呢? 如果我描述的不够清楚 我还可以补充说明。 演示代码如下: ``` <html> <head> <title>Js弹出浮动窗口,支持鼠标拖动和关闭</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /** 关于一些参数说明: *bodycontent:要在窗口显示的内容,dom对象 *title:窗口标题,字符串类型 *removeable:窗口能否拖动,布尔类型 *注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/ function createdialog(width,height,bodycontent,title,removeable){ if(document.getElementById("www_jb51_net")==null){ /*创建窗口的组成元素*/ var dialog = document.createElement("div"); var dialogtitlebar= document.createElement("div"); var dialogbody = document.createElement("div"); var dialogtitleimg = document.createElement("span"); var dialogtitle = document.createElement("span"); var dialogclose = document.createElement("span"); var closeaction = document.createElement("button"); /*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/ dialog.id = "223238909"; /*组装对话框标题栏,按从里到外的顺序组装*/ dialogtitle.innerHTML = title; dialogtitlebar.appendChild(dialogtitleimg); dialogtitlebar.appendChild(dialogtitle); dialogtitlebar.appendChild(dialogclose); dialogclose.appendChild(closeaction); /*组装对话框主体内容*/ if(bodycontent!=null){ bodycontent.style.display = "block"; dialogbody.appendChild(bodycontent); } /*组装成完整的对话框*/ dialog.appendChild(dialogtitlebar); dialog.appendChild(dialogbody); /*设置窗口组成元素的样式*/ var templeft,temptop,tempheight//窗口的位置(将窗口放在页面中间的辅助变量) var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串 templeft = (document.body.clientWidth-width)/2; temptop = (document.body.clientHeight-height)/2; tempheight= height-30; dialogcssText= "position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;"; dialogbodycssText = "width:100%;background:#ffffff;"+"height:" + tempheight + "px;"; dialog.style.cssText = dialogcssText; dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;"; dialogbody.style.cssText = dialogbodycssText; dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;"; dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;"; dialogclose.style.cssText = "float:right;display:block;margin:4px;line-height:20px;"; closeaction.style.cssText = "height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;"; /*为窗口元素注册事件*/ var dialogleft = parseInt(dialog.style.left); var dialogtop = parseInt(dialog.style.top); var ismousedown = false;//标志鼠标是否按下 /*关闭按钮的事件*/ closeaction.onclick = function(){ dialog.parentNode.removeChild(dialog); } /*实现窗口的移动,这段代码很典型,网上很多类似的代码*/ if(removeable == true){ var ismousedown = false; var dialogleft,dialogtop; var downX,downY; dialogleft = parseInt(dialog.style.left); dialogtop = parseInt(dialog.style.top); dialogtitlebar.onmousedown = function(e){ ismousedown = true; downX = e.clientX; downY = e.clientY; } document.onmousemove = function(e){ if(ismousedown){ dialog.style.top = e.clientY - downY + dialogtop + "px"; dialog.style.left = e.clientX - downX + dialogleft + "px"; } } /*松开鼠标时要重新计算当前窗口的位置*/ document.onmouseup = function(){ dialogleft = parseInt(dialog.style.left); dialogtop = parseInt(dialog.style.top); ismousedown = false; } } return dialog; }//end if(if的结束) } </script> <style> table{background:#b2d235;} button{font-size:12px;height:23;background:#ece9d8;border-width:1;} #linkurl,#linkname,#savelink{width:100px;} </style> </head> <body> <!-- 显示窗口的地方 --> <div id="here"></div><a id="clickhere" href="#">点击生成窗口</a> <!-- 要嵌入到窗口的内容 --> <div id="login" style="display:none;"> <form action="#" method="post" onSubmit="return false;"> <table width="400" height="95"> <tr> <td width="78">链接文字</td> <td width="168"><input name="link.name" type="text" value="浮窗测试"/></td> <td width="138" id="linktext"></td> </tr> <tr> <td>链接地址</td> <td><input name="link.url" type="text" value="f"/></td> <td id="linkurl"></td> </tr> <tr> <td></td> <td><button type="submit" style="float:right;">添加</button></td> <td id="savelink"></td> </tr> </table> </form> </div> <script type="text/javascript"> var here = document.getElementById("here"); var login = document.getElementById("login"); var clickhere = document.getElementById("clickhere"); clickhere.onclick = function(){ here.appendChild(createdialog(400,95+30,login,"中国外汇交易中心",true)); } </script> </body> </html> ```
JS制作二级菜单的问题,我使用的innerHTML
先说下问题: 我想用JS的innerHTML添加二级菜单,所以在一级菜单后面加了一个空的div标签 ,然后innerHTML加入内容,并在<li>标记中加入onmouseover和onmouseout 事件。两段代码如下。 现在的问题是 鼠标点了“我的京东”后二级菜单出现,但是,离开二级菜单一直在那挂着,不消失,不知道是因为什么? 求懂得朋友解答!! 另您给解答后,再给说下您感觉比较好的添加二级菜单的方法,10C币奉上,不甚感谢。 ``` <li class="li_c li_me" onmouseover="myMouse();" onmouseout="myMouseOut();"><a href="#">我的京东</a><div id="myid" ></div></li> ``` js代码: ``` <script type="text/javascript"> function $(id){return document.getElementById(id);} //这个里面的id没带“”引号 function myMouse() { $("myid").innerHTML="<table><tr><td><a href=\"#\">我的京豆</a></td><td><a href=\"#\">我的白条</a></td></tr><tr><td><a href=\"#\">返修进度</a></td><td><a href=\"#\">我的会员</a></td></tr></table>"; $("myid").style.position="absolute"; //html中的属性=后面是属性值,属性值要加双引号"" $("myid").style.width="120px"; $("myid").style.height="60px"; $("myid").style.display="block"; } function myMouseOut(){ $("myid").style.display="none"; } </script> ```
关于使用CSS的hover鼠标移至图片触发图片变化问题
![图片说明](https://img-ask.csdn.net/upload/201903/02/1551513938_469033.png) 如图,鼠标移至黄色图片上方,想让图片3的这块灰色区域完全覆盖黄色区域,该怎么办呢? 以下为相关的代码块: ``` .type a{ position:relative;width:320px;margin:0 0px 0 0;float:left;height:232px;} .type li{width:320px;float:left;margin:2px;display:block;list-style:none;} .type a:hover{text-decoration:none;cursor:hand;} .type a span{display:none;cursor:hand;text-align:center;color:#FFF;line-height:36px;padding:98px 0;font-weight:bold;} .type a:hover span{width:320px;background:#000;display:block;position:absolute;bottom:0px;left:0;color:##FFF;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;align:center;} ``` ``` <div class="type" style=" height: 250px;width: 600px;margin: 0px;padding: 0px; position: absolute;left: 900px;top: 115px;"> <li><a href="#"><img src="imgs/3.png" /><span>图片3</span></a></li> </div> ``` 新人学习,请大佬们指点迷津!谢过各位
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私有的数
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
此博客仅为我业余记录文章所用,发布到此,仅供网友阅读参考,如有侵权,请通知我,我会删掉。 补充 有不少读者留言说本文章没有用,因为天气预报直接打开手机就可以收到了,为何要多此一举发送到邮箱呢!!!那我在这里只能说:因为你没用,所以你没用!!! 这里主要介绍的是思路,不是天气预报!不是天气预报!!不是天气预报!!!天气预报只是用于举例。请各位不要再刚了!!! 下面是我会用到的两个场景: 每日下
面试官问我:什么是消息队列?什么场景需要他?用了会出现什么问题?
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了无数
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
MyBatis研习录(01)——MyBatis概述与入门
C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往——自定义View系列教程(10篇) 走出思维困境,踏上精进之路——Android开发进阶精华录 讲给Android程序员看的前端系列教程(40集免费视频教程+源码) 版权声明 本文原创作者:谷哥的小弟 作者博客
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 前前言 为啥今天有个前前言呢? 因为你们的丙丙啊,昨天有牌面了哟,直接被微信官方推荐,知乎推荐,也就仅仅是还行吧(心里乐开花)
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
Python爬虫精简步骤1 获取数据
爬虫的工作分为四步: 1.获取数据。爬虫程序会根据我们提供的网址,向服务器发起请求,然后返回数据。 2.解析数据。爬虫程序会把服务器返回的数据解析成我们能读懂的格式。 3.提取数据。爬虫程序再从中提取出我们需要的数据。 4.储存数据。爬虫程序把这些有用的数据保存起来,便于你日后的使用和分析。 这一篇的内容就是:获取数据。 首先,我们将会利用一个强大的库——requests来获取数据。 在电脑上安装
Python绘图,圣诞树,花,爱心 | Turtle篇
1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle() circle.shape('circle') circle.color('red') circle.speed('fastest') circle.up() square = turtle.Turtle()
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东
破14亿,Python分析我国存在哪些人口危机!
2020年1月17日,国家统计局发布了2019年国民经济报告,报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏,但是很多人并没有看到我国复杂的人口问题:老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧! 更多有趣分析教程,扫描下方二维码关注vx公号「裸睡的猪」 即可查看! 一、背景 1.人口突破14亿 2020年1月17日,国家统计局发布
web前端javascript+jquery知识点总结
Javascript javascript 在前端网页中占有非常重要的地位,可以用于验证表单,制作特效等功能,它是一种描述语言,也是一种基于对象(Object)和事件驱动并具有安全性的脚本语言 ,语法同java类似,是一种解释性语言,边执行边解释。 JavaScript的组成: ECMAScipt 用于描述: 语法,变量和数据类型,运算符,逻辑控制语句,关键字保留字,对象。 浏览器对象模型(Br
Python实战:抓肺炎疫情实时数据,画2019-nCoV疫情地图
文章目录1. 前言2. 数据下载3. 数据处理4. 数据可视化 1. 前言 今天,群里白垩老师问如何用python画武汉肺炎疫情地图。白垩老师是研究海洋生态与地球生物的学者,国家重点实验室成员,于不惑之年学习python,实为我等学习楷模。先前我并没有关注武汉肺炎的具体数据,也没有画过类似的数据分布图。于是就拿了两个小时,专门研究了一下,遂成此文。 2月6日追记:本文发布后,腾讯的数据源多次变更u
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ......
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!
渗透测试-灰鸽子远控木马
木马概述 灰鸽子( Huigezi),原本该软件适用于公司和家庭管理,其功能十分强大,不但能监视摄像头、键盘记录、监控桌面、文件操作等。还提供了黑客专用功能,如:伪装系统图标、随意更换启动项名称和表述、随意更换端口、运行后自删除、毫无提示安装等,并采用反弹链接这种缺陷设计,使得使用者拥有最高权限,一经破解即无法控制。最终导致被黑客恶意使用。原作者的灰鸽子被定义为是一款集多种控制方式于一体的木马程序
Python:爬取疫情每日数据
前言 有部分同学留言说为什么412,这是因为我代码里全国的cookies需要你自己打开浏览器更新好后替换,而且这个cookies大概只能持续20秒左右! 另外全国卫健委的数据格式一直在变,也有可能会导致爬取失败! 我现在已根据2月14日最新通报稿的格式修正了! 目前每天各大平台,如腾讯、今日头条都会更新疫情每日数据,他们的数据源都是一样的,主要都是通过各地的卫健委官网通报。 为什么已经有大量平台做
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。   再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。   下文是原回答,希望能对你能有所启发。   如果我说,这个世界上人真的分三六九等,
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计
Python新型冠状病毒疫情数据自动爬取+统计+发送报告+数据屏幕(三)发送篇
今天介绍的项目是使用 Itchat 发送统计报告 项目功能设计: 定时爬取疫情数据存入Mysql 进行数据分析制作疫情报告 使用itchat给亲人朋友发送分析报告(本文) 基于Django做数据屏幕 使用Tableau做数据分析 来看看最终效果 目前已经完成,预计2月12日前更新 使用 itchat 发送数据统计报告 itchat 是一个基于 web微信的一个框架,但微信官方并不允
作为程序员的我,大学四年一直自学,全靠这些实用工具和学习网站!
我本人因为高中沉迷于爱情,导致学业荒废,后来高考,毫无疑问进入了一所普普通通的大学,实在惭愧...... 我又是那么好强,现在学历不行,没办法改变的事情了,所以,进入大学开始,我就下定决心,一定要让自己掌握更多的技能,尤其选择了计算机这个行业,一定要多学习技术。 在进入大学学习不久后,我就认清了一个现实:我这个大学的整体教学质量和学习风气,真的一言难尽,懂的人自然知道怎么回事? 怎么办?我该如何更好的提升
粒子群算法求解物流配送路线问题(python)
粒子群算法求解物流配送路线问题(python) 1.查找论文文献 找一篇物流配送路径优化+粒子群算法求解的论文 参考文献:基于混沌粒子群算法的物流配送路径优化 2.了解粒子群算法的原理 讲解通俗易懂,有数学实例的博文:https://blog.csdn.net/daaikuaichuan/article/details/81382794 3.确定编码方式和解码策略 3.1编码方式 物流配送路线的
教你如何编写第一个简单的爬虫
很多人知道爬虫,也很想利用爬虫去爬取自己想要的数据,那么爬虫到底怎么用呢?今天就教大家编写一个简单的爬虫。 下面以爬取笔者的个人博客网站为例获取第一篇文章的标题名称,教大家学会一个简单的爬虫。 第一步:获取页面 #!/usr/bin/python # coding: utf-8 import requests #引入包requests link = "http://www.santostang.
前端JS初级面试题二 (。•ˇ‸ˇ•。)老铁们!快来瞧瞧自己都会了么
1. 传统事件绑定和符合W3C标准的事件绑定有什么区别? 传统事件绑定 &lt;div onclick=""&gt;123&lt;/div&gt; div1.onclick = function(){}; &lt;button onmouseover=""&gt;&lt;/button&gt; 注意: 如果给同一个元素绑定了两次或多次相同类型的事件,那么后面的绑定会覆盖前面的绑定 (不支持DOM事...
相关热词 c# id读写器 c#俄罗斯方块源码 c# linq原理 c# 装箱有什么用 c#集合 复制 c# 一个字符串分组 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图
立即提问