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

これz-index:-1;により、リンクをクリックできるようになります。The 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

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 に答える