39

我在页面上有菜单和绝对定位的 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/

4

9 回答 9

70

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

pointer-events: none

（它是跨浏览器解决方案，包括 >= IE11）

这是此解决方案的来源，其中包含更多信息。我在 chrome、firefox 和 safari（macOs 和 iOS）上对其进行了测试并且工作正常：）

如果你喜欢这个答案，请给我一杯咖啡

于 2017-07-18T20:46:19.197 回答
24

添加 az-index:-1;这将允许单击链接。由于 Div 绝对位于链接之上，因此它不允许可点击性。

 #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;
    z-index:-1;
}

这是相同的工作解决方案。

希望这可以帮助。

于 2013-05-27T13:13:44.263 回答
6

将 z-index:1 放到具有绝对属性的组件上。

例如：

function myFunction() {
  document.getElementById("print").innerHTML = "Hello World";
}
.custcontainer {
    position: relative;
    
}
.custcontainer .like {
    position: absolute;
    top: 18%;
    left: 10%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    cursor: pointer;
    font-size:30px;
    text-align: center;
    z-index: 1;
}
<div class="custcontainer">
  <P id="print"></p>
  <button onclick="myFunction()" class="like">like</button>
  <img src="https://www.crownplumbing.co/wp-content/uploads/2015/07/placeholder.gif"/>
</div>

于 2018-04-28T23:47:56.743 回答
5

添加position:relative到#menu

#menu
{
    position:relative;
}

JS 小提琴演示

于 2013-05-27T13:13:19.197 回答
3

你的z-index有问题..

它涵盖了菜单元素：

 #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;
    z-index:-111;
}

http://jsfiddle.net/Dq6F4/2/

于 2013-05-27T13:14:27.433 回答
1

您的问题实际上是#left_border 将链接覆盖为覆盖。限制它的宽度.. 例如

#left_border{
  width:50px;
}
于 2013-05-27T13:15:01.473 回答
0

我找到了一个非常简单的解决方案！我将左边设置为一个百分比 - 它以像素为单位 - 并添加了一个以像素为单位的左边距。这就像一个魅力！ http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html

于 2014-07-31T11:08:10.860 回答
0

使用 Google Chrome 或 Mozilla Firefox 的开发者工具将鼠标悬停在您的链接和 div 上（或选择它们）。这样你就可以看到正在发生的事情，而且很可能还有另一个 div 或其他对象堆叠在你的链接之上，这会阻止你点击它们。Firefox 还有一个 3D 选项，可以更好地显示所有这些：

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view
于 2013-05-27T13:13:30.000 回答
0

Z-index 仅适用于定位元素。定位元素是其位置值设置为绝对、固定、相对或粘性的元素。也就是说，元素必须设置为除静态之外的任何位置值，这是默认位置值。看这篇文章

于 2021-01-15T06:13:11.417 回答