给大家带来css的pointer-events属性完成上面元素可点击

只看该作者 · 发表于 2015-1-15 23:20:21

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

结构清晰，容易被搜索引擎搜索到，天生优化了seo

破洛洛文章简介：CSSpointer-events上层元素被点击.
是不是已经有过如许的履历：把一个元素置于另外一个元素之上，而但愿上面的谁人元素成为可点击的？如今，使用css的pointer-events属性便可做到。
CSSpointer-events
Pointer-events底本来历于SVG，今朝在良多扫瞄器中已失掉表现。不外，要让任何HTML元素失效还得借助于一点点css。该属性称之为pointer-events，基础上能够将它设置为auto，这是一般的举动，而“none”是一个风趣的属性。
将它使用到一个元素
假如你已设置一个元素的css属性为pointer-events:none。它将不会捕捉任何click事务，而是让事务穿过该元素抵达上面的元素，就像如许：
<style>
.overlay{
pointer-events:none;
}
</style>
<divid="overlay"class="overlay"></div>
扫瞄器撑持
到今朝为止，Firefox3.6+、Safari4和GoogleChrome撑持Pointer-events。我以为Opera和IE一定会尽快遇上，我不晓得它们的企图中是不是撑持它。
小演示
我将Pointer-events举动的演示放在一同，在那边你能够本人测试它。正如你看到的那样，右侧灰色的盒子制止单击上面的链接。可是，假如你单击checkbox对其禁用Pointer-events。上面链接的click事务将被触发。
演示页完全的代码以下所示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>CSSpointerevents</title>
<style>
.container{
position:relative;
width:370px;
font:15pxVerdana,sans-serif;
margin:10pxauto;
}

.overlay{
position:absolute;
right:0px;
top:0;
width:40px;
height:40px;
background:rgba(0,0,0,0.5);
}
.pointer-events-none{
pointer-events:none;
}
</style>
<script>
window.onload=function(){
document.getElementById("enable-disable-pointer-events").onclick=function(){
document.getElementById("overlay").className="overlay"+((this.checked)?"pointer-events-none":"");
};
};
</script>
</head>
<body>
<divclass="container">
<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,<ahref="http://twitter.com">Twitter</a>,
<divid="overlay"class="overlay"></div>
<p>
<inputid="enable-disable-pointer-events"type="checkbox">
<labelfor="enable-disable-pointer-events">Disablepointereventsforgreybox</label>
</p>
</div>
</body>
</html>
实践的例子
假如你进进Twitter（国际仿佛不克不及登录到该网站，以下图所示）的入手下手页，并且没有登录。在底部你将看到良多列出的标签。在右侧的一个元素，有一张退色的图片掩盖其上发生如许的效果。不幸的是上面的链接没法点击。假如你在css中增加一行代码，就能够了。
如今，假如你必要这类效果，你有了一个十分复杂的办法。

登录/注册后可看大图

原文地点：
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/#respond
</p>
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

只看该作者 · 发表于 2015-1-17 21:56:32

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-1-24 10:35:51

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-2-1 09:44:42

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-2-7 03:47:44

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-20 16:05:39

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-3-6 18:46:46

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-13 07:08:37

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-20 16:34:32

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来css的pointer-events属性完成上面元素可点击

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子