html - 添加绝对位置的div时无法点击链接

Question

我在页面上有菜单和绝对定位的 div。问题是当这个 div 在页面上时，我无法单击菜单项中的任何链接。

当我删除这个 div (#left_border) 时，链接又可以点击了。

为什么？

CSS:

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
}  

HTML:

<div id="wrapper">
<div id="content">
    <div id="left_border"></div>
    <div id="left">
        <div id="menu">
            <ul class="menu">
                <li class="item-101 current active deeper parent"><a href="/">Home</a>

                    <ul>
                        <li class="item-107"><a href="/index.php/home/news">News</a>

                        </li>
                    </ul>
                </li>
                <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a>
                </li>                    
            </ul>
        </div>
    </div>       
</div>

在这里你看到，你不能点击菜单项:http://jsfiddle.net/Dq6F4/

Answer 1

CSS - 取消阻止点击添加到 #left_border 类以下语句:

pointer-events: none 

(它是跨浏览器的解决方案，包括 >= IE11)

Here is source此解决方案的更多信息。我在 chrome、firefox 和 safari(macOs 和 iOS)上对其进行了测试并且有效:)

如果你喜欢这个答案buy me a coffee