Question

<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的新手，我有一个像上面这样的简单案例。我想使“标题”和“一些网址”可点击，但希望将描述视为不可点击。有没有办法通过在跨度上应用一些CSS来做到这一点，以便在该跨度内的任何内容，它是不可点击的。我的约束是，我不想改变div的结构，而只是应用css我们可以创建一个在锚标签内的span，而不是可点击的？

Answer 1

实际上，你做可以通过CSS实现这一点。有一个几乎未知的css规则名为指针事件。 a 元素仍然可以点击，但您的描述范围不会。

a span.description {
    pointer-events: none;
}

还有其他值，如：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

Answer 2

不使用CSS。但是，通过取消这些元素的默认事件处理，您可以轻松地使用JavaScript。在jQuery中：

$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });

Answer 3

CSS用于应用样式，即界面的视觉方面。

单击一个锚元素导致执行的操作是接口的行为方面，而不是样式方面。

只使用CSS无法达到你想要的效果。

JavaScript用于将行为应用于接口。您可以使用JavaScript来修改链接的行为。

Answer 4

回应piemesons对jQuery的反应，一个Vanilla JavaScript（TM）解决方案（在FF和IE上测试）：

在加载标记之后（在body标记结束之前）将它放在脚本标记中，您将获得与jQuery示例类似的效果。

a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
  a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}

这将禁用标签内每个第二个跨度的点击。您还可以检查每个范围的innerHTML以获取“description”，或者设置属性或类并检查它。

Answer 5

CSS涉及视觉样式而非行为，因此答案并非如此。

然而，您可以使用javascript来修改行为或更改相关范围的样式，以便它没有尖尖的手指，下划线等。如此样式化仍然会使其可点击。

更好的是，更改您的标记，以便它反映您希望它做什么。

Answer 6

是的，你可以.... 你可以把一些东西放在链接元素之上。

<!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>

魔术酱发生在产品类型 - 简单：在类之前这里发生的事情是，对于每个具有产品类型简单类的元素，你创建某事，其宽度和高度等于product-type-simple的宽度和高度，然后你增加它的z-索引，以确保它将自己放在product-type-simple的内容之上。如果要查看最新情况，可以切换背景颜色。

这是一个代码示例 https://jsfiddle.net/92qky63j/

Answer 7

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

然后你可以设置它的样式，使其看起来也不可点击：

<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使跨度不可点击

7 个答案: