gpt4 book ai didi

css - 使用 CSS 使 span 不可点击

转载 作者:数据小太阳 更新时间:2023-10-29 09:10:42 24 4
gpt4 key购买 nike

<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 我们可以制作一个位于 anchor 标记内的跨度,而不是可点击的吗?

最佳答案

实际上,您可以通过 CSS 实现这一点。有一个几乎不为人知的 css 规则,名为 pointer-events。 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

更新:截至 2022 年,浏览器行为可能已经改变,另一种选择是:

a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}

关于css - 使用 CSS 使 span 不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3144050/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com