V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
misakawaque
V2EX  ›  CSS

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

  •  
  •   misakawaque · 2021-08-10 11:28:24 +08:00 · 1303 次点击
    这是一个创建于 962 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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
        1
    learnshare  
       2021-08-10 11:32:08 +08:00
    https://codepen.io/ 上来个 demo
    Puteulanus
        2
    Puteulanus  
       2021-08-10 11:34:20 +08:00   ❤️ 1
    图标设置 pointer-events 为 none 试试
    misakawaque
        3
    misakawaque  
    OP
       2021-08-10 12:56:36 +08:00
    @Puteulanus 感谢大佬,解决了
    misakawaque
        4
    misakawaque  
    OP
       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
        5
    misakawaque  
    OP
       2021-08-10 13:12:05 +08:00
    ![这是图片]( http://47.100.188.113/1a.jpg)

    绿色是 li 标签而紫色是 a 标签
    明明使用了 100%的描述,但是 a 小了一圈
    Puteulanus
        6
    Puteulanus  
       2021-08-10 13:39:28 +08:00   ❤️ 1
    @misakawaque a 标签 display block 试试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2750 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:10 · PVG 20:10 · LAX 05:10 · JFK 08:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.