如何用JS屏蔽页面的某一部分?使那部分不能点击 用个全透明的gif或png图片盖在几个链接上面, 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 css3有pointer-events:none;直接disabled不就好了 在css里加上pointer-events:none就可以了这个是没有加的<!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=gb2312" /><title>无标题文档</title></head><style>*{ margin:0; padding:0;}.clear:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}nav{ display:inline-block; border:1px solid #505255; border-bottom: 1px solid #282C2F; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:50px; -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929;}li{ list-style:none; float:left; border-right: 1px solid #2E3235; position: relative; background:#555D5F;}li:hover{ background:#3E4245; -moz-transition: background 1s ease-out; -webkit-transition: background 1s ease-out;}li a{ display:block; height:40px; line-height:40px; padding:0 30px; font-size:12px; color:#fff; text-shadow: 0px -1px 0px #000; text-decoration:none; white-space:nowrap; border-left: 1px solid #999E9F; border-top: 1px solid #999E9F; -moz-border-top-left-radius: 2px; -webkit-border-top-left-radius: 2px; z-index:100;}li > a{ position:relative;}li.first a{ -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;}li.last{ border-right: 0 none;}dl{ position:absolute; display:block; top:40px; left: -25px; width:165px; background:#222222; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; z-index:10; }li:hover dl{ top:50px; display:block; width:145px; padding:10px;}dl a{ background:transparent; border:0 none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-transition: background 0.5s ease-out; -webkit-transition: background 0.5s ease-out; z-index:50;}dl a:hover{ color:#FFF; background:#999E9F; -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;}dd{ margin-top:-40px; opacity:0; width:145px; -webkit-transition-property:all; -moz-transition-property: all;}li:hover dd{ margin-top:0; opacity:1;}li dd:nth-child(1){ -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s;}li dd:nth-child(2){ -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s;}li dd:nth-child(3){ -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s;}li dd:nth-child(4){ -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s;}dt{ display:none; margin-top:-25px; padding-top:15px; height:10px;}li:hover dt{ display:block;}.Darrow{ float:right; margin:18px 10px 0 0; border-width:5px; border-color:#FFF transparent transparent transparent; border-style:solid; width:0; height:0; line-height:0; overflow:hidden; cursor:pointer; text-shadow: 0px -1px 0px #000; -webkit-box-shadow:0px -1px 0px #000; -moz-box-shadow:0px -1px 0px #000;}.arrow{ margin:0 auto; margin-top:-5px; display:block; width:10px; height:10px; background:#222222; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}</style></head><body><nav> <ul class="clear"> <li class="first"><a href="#">菜单一</a></li> <li> <span class="Darrow"></span> <a href="#">菜单二</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd> <dd><a href="#">子菜单二</a></dd> <dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜单三</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd> <dd><a href="#">子菜单二</a></dd> <dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜单四</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd> <dd><a href="#">子菜单二</a></dd> <dd><a href="#">子菜单三</a></dd> <dd><a href="#">子菜单四</a></dd> </dl> </li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单六</a></li> <li><a href="#">菜单七</a></li> <li class="last"><a href="#">菜单八</a></li> </ul></nav></body></html>这个是加pointer-events:none的<!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=gb2312" /><title>无标题文档</title></head><style>*{ margin:0; padding:0;}.clear:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}nav{ display:inline-block; border:1px solid #505255; border-bottom: 1px solid #282C2F; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:50px; -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; pointer-events:none;}li{ list-style:none; float:left; border-right: 1px solid #2E3235; position: relative; background:#555D5F;}li:hover{ background:#3E4245; -moz-transition: background 1s ease-out; -webkit-transition: background 1s ease-out;}li a{ display:block; height:40px; line-height:40px; padding:0 30px; font-size:12px; color:#fff; text-shadow: 0px -1px 0px #000; text-decoration:none; white-space:nowrap; border-left: 1px solid #999E9F; border-top: 1px solid #999E9F; -moz-border-top-left-radius: 2px; -webkit-border-top-left-radius: 2px; z-index:100;}li > a{ position:relative;}li.first a{ -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;}li.last{ border-right: 0 none;}dl{ position:absolute; display:block; top:40px; left: -25px; width:165px; background:#222222; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; z-index:10; }li:hover dl{ top:50px; display:block; width:145px; padding:10px;}dl a{ background:transparent; border:0 none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-transition: background 0.5s ease-out; -webkit-transition: background 0.5s ease-out; z-index:50;}dl a:hover{ color:#FFF; background:#999E9F; -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;}dd{ margin-top:-40px; opacity:0; width:145px; -webkit-transition-property:all; -moz-transition-property: all;}li:hover dd{ margin-top:0; opacity:1;}li dd:nth-child(1){ -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s;}li dd:nth-child(2){ -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s;}li dd:nth-child(3){ -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s;}li dd:nth-child(4){ -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s;}dt{ display:none; margin-top:-25px; padding-top:15px; height:10px;}li:hover dt{ display:block;}.Darrow{ float:right; margin:18px 10px 0 0; border-width:5px; border-color:#FFF transparent transparent transparent; border-style:solid; width:0; height:0; line-height:0; overflow:hidden; cursor:pointer; text-shadow: 0px -1px 0px #000; -webkit-box-shadow:0px -1px 0px #000; -moz-box-shadow:0px -1px 0px #000;}.arrow{ margin:0 auto; margin-top:-5px; display:block; width:10px; height:10px; background:#222222; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}</style></head><body><nav> <ul class="clear"> <li class="first"><a href="#">菜单一</a></li> <li> <span class="Darrow"></span> <a href="#">菜单二</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd> <dd><a href="#">子菜单二</a></dd> <dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜单三</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd> <dd><a href="#">子菜单二</a></dd> <dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜单四</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd> <dd><a href="#">子菜单二</a></dd> <dd><a href="#">子菜单三</a></dd> <dd><a href="#">子菜单四</a></dd> </dl> </li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单六</a></li> <li><a href="#">菜单七</a></li> <li class="last"><a href="#">菜单八</a></li> </ul></nav></body></html>pointer-events:none顾名思意,就是鼠标事件拜拜的意思。元素应用了该CSS属性,链接啊,点击啊什么的都变成了“浮云牌酱油”。pointer-events:none的作用不只是禁用链接hover,打开链接等效果,是真实意义上的将onlick事件去掉了。 弄个透明的层盖住<div style="position:relative"><div style="position:absolute;width:100%;height:100%;left:0px;top:0px;background:#000;filter:alpha(opacity=0);opacity:0"></div><iframe src="http://www.baidu.com"></iframe>你就是无法选择我和点击</div> 正在加载中的图片为什么会动 关于在线编辑word文档的问题 关于Extjs的问题 为减少页面加载缓慢,应该如何处理,向高手请教 请教类似换页效果 如何用JS实现,点击页面背景变!是两种颜色交替更改 js获取easyui datagrid中的数据,并拼接成json javascript 可以实现像资源管理器左侧那样的树吗?就是上级目录和下级目录间有虚线的? combobox加载失败 JavaScript 点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的 请教一下这样用&&怎么理解
pointer-events:none;
直接disabled不就好了
这个是没有加的
<!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=gb2312" />
<title>无标题文档</title>
</head><style>
*{
margin:0;
padding:0;
}
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
nav{
display:inline-block;
border:1px solid #505255;
border-bottom: 1px solid #282C2F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:50px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
}
li{
list-style:none;
float:left;
border-right: 1px solid #2E3235;
position: relative;
background:#555D5F;
}
li:hover{
background:#3E4245;
-moz-transition: background 1s ease-out;
-webkit-transition: background 1s ease-out;
}
li a{
display:block;
height:40px;
line-height:40px;
padding:0 30px;
font-size:12px;
color:#fff;
text-shadow: 0px -1px 0px #000;
text-decoration:none;
white-space:nowrap;
border-left: 1px solid #999E9F;
border-top: 1px solid #999E9F;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index:100;
}
li > a{
position:relative;
}
li.first a{
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
li.last{
border-right: 0 none;
}
dl{
position:absolute;
display:block;
top:40px;
left: -25px;
width:165px;
background:#222222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
z-index:10;
}
li:hover dl{
top:50px;
display:block;
width:145px;
padding:10px;
}
dl a{
background:transparent;
border:0 none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-transition: background 0.5s ease-out;
-webkit-transition: background 0.5s ease-out;
z-index:50;
}
dl a:hover{
color:#FFF;
background:#999E9F;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
dd{
margin-top:-40px;
opacity:0;
width:145px;
-webkit-transition-property:all;
-moz-transition-property: all;}
li:hover dd{
margin-top:0;
opacity:1;
}
li dd:nth-child(1){
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
}
li dd:nth-child(2){
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
}
li dd:nth-child(3){
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
}
li dd:nth-child(4){
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
}
dt{
display:none;
margin-top:-25px;
padding-top:15px;
height:10px;
}
li:hover dt{
display:block;
}
.Darrow{
float:right;
margin:18px 10px 0 0;
border-width:5px;
border-color:#FFF transparent transparent transparent;
border-style:solid;
width:0;
height:0;
line-height:0;
overflow:hidden;
cursor:pointer;
text-shadow: 0px -1px 0px #000;
-webkit-box-shadow:0px -1px 0px #000;
-moz-box-shadow:0px -1px 0px #000;
}
.arrow{
margin:0 auto;
margin-top:-5px;
display:block;
width:10px;
height:10px;
background:#222222;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
</style>
</head>
<body>
<nav>
<ul class="clear">
<li class="first"><a href="#">菜单一</a></li>
<li>
<span class="Darrow"></span>
<a href="#">菜单二</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单三</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单四</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三</a></dd>
<dd><a href="#">子菜单四</a></dd>
</dl>
</li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单七</a></li>
<li class="last"><a href="#">菜单八</a></li>
</ul>
</nav>
</body>
</html>
这个是加pointer-events:none的
<!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=gb2312" />
<title>无标题文档</title>
</head><style>
*{
margin:0;
padding:0;
}
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
nav{
display:inline-block;
border:1px solid #505255;
border-bottom: 1px solid #282C2F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:50px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
pointer-events:none;
}
li{
list-style:none;
float:left;
border-right: 1px solid #2E3235;
position: relative;
background:#555D5F;
}
li:hover{
background:#3E4245;
-moz-transition: background 1s ease-out;
-webkit-transition: background 1s ease-out;
}
li a{
display:block;
height:40px;
line-height:40px;
padding:0 30px;
font-size:12px;
color:#fff;
text-shadow: 0px -1px 0px #000;
text-decoration:none;
white-space:nowrap;
border-left: 1px solid #999E9F;
border-top: 1px solid #999E9F;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index:100;
}
li > a{
position:relative;
}
li.first a{
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
li.last{
border-right: 0 none;
}
dl{
position:absolute;
display:block;
top:40px;
left: -25px;
width:165px;
background:#222222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
z-index:10;
}
li:hover dl{
top:50px;
display:block;
width:145px;
padding:10px;
}
dl a{
background:transparent;
border:0 none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-transition: background 0.5s ease-out;
-webkit-transition: background 0.5s ease-out;
z-index:50;
}
dl a:hover{
color:#FFF;
background:#999E9F;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
dd{
margin-top:-40px;
opacity:0;
width:145px;
-webkit-transition-property:all;
-moz-transition-property: all;}
li:hover dd{
margin-top:0;
opacity:1;
}
li dd:nth-child(1){
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
}
li dd:nth-child(2){
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
}
li dd:nth-child(3){
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
}
li dd:nth-child(4){
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
}
dt{
display:none;
margin-top:-25px;
padding-top:15px;
height:10px;
}
li:hover dt{
display:block;
}
.Darrow{
float:right;
margin:18px 10px 0 0;
border-width:5px;
border-color:#FFF transparent transparent transparent;
border-style:solid;
width:0;
height:0;
line-height:0;
overflow:hidden;
cursor:pointer;
text-shadow: 0px -1px 0px #000;
-webkit-box-shadow:0px -1px 0px #000;
-moz-box-shadow:0px -1px 0px #000;
}
.arrow{
margin:0 auto;
margin-top:-5px;
display:block;
width:10px;
height:10px;
background:#222222;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
</style>
</head>
<body>
<nav>
<ul class="clear">
<li class="first"><a href="#">菜单一</a></li>
<li>
<span class="Darrow"></span>
<a href="#">菜单二</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单三</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单四</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三</a></dd>
<dd><a href="#">子菜单四</a></dd>
</dl>
</li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单七</a></li>
<li class="last"><a href="#">菜单八</a></li>
</ul>
</nav>
</body>
</html>pointer-events:none顾名思意,就是鼠标事件拜拜的意思。元素应用了该CSS属性,链接啊,点击啊什么的都变成了“浮云牌酱油”。pointer-events:none的作用不只是禁用链接hover,打开链接等效果,是真实意义上的将onlick事件去掉了。
<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;background:#000;filter:alpha(opacity=0);opacity:0"></div>
<iframe src="http://www.baidu.com"></iframe>
你就是无法选择我和点击
</div>