使用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/