使用CSS来使跨度不可点击
<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> 我是相当新的CSS，我有一个像上面这样的简单情况。 我想使“标题”和“一些URL”可点击，但想要描述为不可点击。 有没有办法通过在跨度上应用一些CSS来做到这一点，以便在该跨度内的任何内容都不可点击。 我的约束是，我不想改变div的结构，而只是应用css，我们可以做一个在锚标签里面的span，而不是可点击的？
使用CSS你不能，CSS只会改变跨度的外观。 但是，您可以通过在跨度中添加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>
您可以对其进行devise，使其看起来不可点击：
<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>
其实，你可以通过CSS来实现。 有一个名为pointer-events的几乎未知的css规则。 a元素仍然是可点击的，但是您的描述范围不会。
a span.description { pointer-events: none; }
还有其他的价值，如：所有，中风，彩绘等
ref： http : //robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
更新：截至2016年，所有浏览器现在都接受它： http : //caniuse.com/#search=pointer-events
不与CSS。 尽pipe可以通过取消这些元素的默认事件处理来轻松地使用JavaScript。 在jQuery中：
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS用于应用样式，即界面的视觉方面。
点击一个锚元素会导致一个行为被执行是一个接口的行为方面，而不是一个风格方面。
你不能使用CSS来达到你想要的。
JavaScript用于将行为应用于界面。 您可以使用JavaScript来修改链接的行为。
为了回应馅饼对jQuery，香草JavaScript（TM）解决scheme（在FF和IEtesting）：
在加载标记之后（在body标签closures之前）将其放置在脚本标记中，您将获得与jQuery示例类似的效果。
a = document.getElementsByTagName('a'); for (var i = 0; i < a.length;i++) { a[i].getElementsByTagName('span')[1].onclick = function() { return false;}; }
这将禁止点击标签内的每个第二个跨度。 你也可以检查每个span的innerHTML为“description”，或者设置一个属性或类并检查它。
CSS涉及视觉样式，而不是行为，所以答案是没有。
但是，您可以使用JavaScript来修改行为或更改有问题的跨度的样式，以便它没有尖锐的手指，下划线等。像这样的样式仍然会使其可点击。
更好的是，改变你的标记，以便它反映你想要做的事情。
是的，你可以….你可以在链接元素的顶部放置一些东西。
<!DOCTYPE html> <html> <head> <title>Yes you CAN</title> <style type="text/css"> ul{ width: 500px; border: 5px solid black; } .product-type-simple { position: relative; height: 150px; width: 150px; } .product-type-simple:before{ position: absolute; height: 100% ; width: 100% ; content: ''; background: green;//for debugging purposes , remove this if you want to see whats behind z-index: 999999999999; } </style> </head> <body> <ul> <li class='product-type-simple'> <a href="/link1"> <img src="http://placehold.it/150x150"> </a> </li> <li class='product-type-simple'> <a href="/link2"> <img src="http://placehold.it/150x150"> </a> </li> </ul> </body> </html>
魔术酱发生在产品types – 简单：在课前发生的事情是，每个具有产品types的元素 – 简单的你创build一个宽度和高度等于产品types简单的东西，那么你可以增加它的z-index，以确保它将自己置于产品types简单的内容之上。 你可以切换背景颜色，如果你想看看是怎么回事。
这里是一个代码示例https://jsfiddle.net/92qky63j/
