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

[misakawaque]

<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 上面导致点是能点了,图标不见了.......

这怎么解决啊

[learnshare]

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

[Puteulanus]

图标设置 pointer-events 为 none 试试

[misakawaque]

@Puteulanus 感谢大佬,解决了

[misakawaque]

@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]


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

[Puteulanus]

@misakawaque a 标签 display block 试试