css超链接不可点击怎么实现?

css可以使用pointer-events:none;样式使超链接失效,然后通过设置鼠标移动到超链接上时样式为不可点击样式,即可实现超链接不可点击。

css设置超链接不可点击样式:

.disabled{   
 color:gray;   
 cursor:pointer;   
 pointer-events: none;
}

上述代码详解:color:gray;样式设置超链接为灰色,cursor:pointer; 设置鼠标样式为小手,pointer-events: none;样式设置超链接失效。

css设置超链接不可点击实例:

<html>
<head>
<style type="text/css">
.disabled{   
 color:gray;   
 cursor:pointer;   
 pointer-events: none;
}
</style>
</head>
<body>
<a href="www.html.cn" class="disabled">HTML中文网</a>
</body>
</html>

效果图:

css设置超链接不可点击主要使用pointer-events属性。

pointer-events属性介绍:

语法:

pointer-events:auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值:auto

适用于:所有元素

继承性:有

动画性:否

计算值:指定值

取值:

  • auto:与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

  • none:元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

  • 其他值只能应用在SVG上。

说明:

设置或检索在何时成为属性事件的target。

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。

如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。

当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

以上就是css超链接不可点击怎么实现?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读