<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我是CSS的新手,我有一个像上面这样的简单案例.我想使"标题"和"一些网址"可点击,但希望将描述视为不可点击.有没有办法通过在跨度上应用一些CSS来做到这一点,以便在该跨度内的任何内容,它是不可点击的.我的约束是,我不想改变div的结构,而只是应用css我们可以创建一个在锚标签内的span,而不是可点击的?
FRA*_*AGA 275
其实,你也可以通过CSS实现这一目标.有一个几乎未知的css规则名为指针事件.在一个元素将仍然可以点击,但你的描述跨度不会.
a span.description {
pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud)
还有其他值,如:all,stroke,painted等.
参考:http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
更新:截至2016年,所有浏览器现在都接受它:http://caniuse.com/#search=pointer-events
小智 -33
使用CSS你不能,CSS只会改变跨度的外观。但是,您可以通过向 span 添加 onclick 处理程序来在不更改 div 结构的情况下完成此操作:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
然后你可以设置它的样式,使其看起来也不可点击:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)