html 中链接的元素总是被图标元素挡住导致点不中怎么办呢

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1194 天前的主题，其中的信息可能已经有所发展或是发生改变。

<li style="top:60px;margin: 5;width: 55px;height: 55px;color: rgb(248, 248, 248);background-color: aquamarine;">

<a href="javascript:jump2baidu();" style="color: #fff;height: 55px;width: 55px;background-color: rgb(103, 34, 194);">

<embed src="vscode-icons/icons/light/files.svg" width="35px" height="35px" style="left: 5px;top: 5px;position: relative;z-index: -1;">

</embed>
</a>
</li>

比如这里的 embed 图标需要在最上显示,而 a 标签作为超链接被 embed 挡住点不了

修改了 z-index 属性以后 a 在 embed 上面导致点是能点了,图标不见了.......

这怎么解决啊

6 条回复 • 2021-08-10 13:39:28 +08:00

learnshare

2021-08-10 11:32:08 +08:00

https://codepen.io/ 上来个 demo

Puteulanus

2021-08-10 11:34:20 +08:00

图标设置 pointer-events 为 none 试试

misakawaque

2021-08-10 12:56:36 +08:00

@Puteulanus 感谢大佬,解决了

misakawaque

2021-08-10 13:05:29 +08:00

@Puteulanus 大佬,再问个问题
就是当一个超链接标签放在 li 标签里的时候,大小总是会变得很奇怪
该怎样解决呢
<ul class="layui-nav layui-nav-tree" lay-filter="test">

<li style="top:60px;margin: 5;width: 55px;height: 55px;color: rgb(248, 248, 248);background-color: aquamarine;">
<a href="javascript:jump2baidu();" style="color: #fff;height: 100%;width:100%;background-color: rgb(103, 34, 194);">
<embed src="vscode-icons/icons/light/files.svg" width="35px" height="35px" style="left: 5px;top: 5px;pointer-events: none;"></embed>
</a>
</li>
<ul>

misakawaque

2021-08-10 13:12:05 +08:00

![这是图片]( http://47.100.188.113/1a.jpg)

绿色是 li 标签而紫色是 a 标签
明明使用了 100%的描述,但是 a 小了一圈

Puteulanus

2021-08-10 13:39:28 +08:00

@misakawaque a 标签 display block 试试