1

重なり合う 2 つの要素があり、一方が他方の上にあります。上の要素の半分は完全に透明 (不透明度 = 0) で、下に他の要素が表示されます。両方の要素にクリック イベント ハンドラーを割り当てましたが、明らかに、下の要素をクリックしようとすると、透明な「上部」要素がアクティブになります。私はこれを回避する方法を探しています。

通常、トップ要素の不透明な部分にゴースト要素を作成して、トップ要素のイベント ハンドラーを取得しますが、斜めのグラデーションを使用しているため、実際にはオプションではありません。

以下の CSS、HTML、および jQuery のコード:

HTML:

<body>
    <div id="wrapper">
        <div id="window">
            <div id="blueRibbon" class="ribbon">
               <div class="ribbonContent">
                   <h1>Page Title</h1>
                   <p>CONTENT</p>
               </div>
            </div>
            <div id="blueRibbon2" class="ribbon">
               <div class="ribbonContent">
                   <h1>Page Title</h1>
                   <p>CONTENT2</p>
               </div>
            </div>
        </div>
    </div>
    <script src="/scripts/jQuery.js"></script>
    <script src="/scripts/ribbons.js"></script>
</body>

CSS:

body, html{
margin: 0;
padding: 0;
height: 100%;
}

#blueRibbon2{
background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 62%, rgba(45,175,226,1) 62%, rgba(45,175,226,1) 67%, rgba(45,175,226,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(652%,rgba(249,249,249,1)), color-stop(62%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 65%,rgba(45,175,226,1) 65%,rgba(45,175,226,1) 69%,rgba(45,175,226,0) 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#002dafe2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*dimensions*/
height: 800px;
width: 1880px;
/*positioning styles*/
position: absolute;
left: -1520px;
}

#blueRibbon{
background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 62%, rgba(45,175,226,1) 62%, rgba(45,175,226,1) 67%, rgba(45,175,226,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(652%,rgba(249,249,249,1)), color-stop(62%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 65%,rgba(45,175,226,1) 65%,rgba(45,175,226,1) 69%,rgba(45,175,226,0) 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#002dafe2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*dimensions*/
height: 800px;
width: 1880px;
/*positioning styles*/
position: absolute;
left: -1400px;
}

#window{
width: 1200px;
height: 800px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
position: relative;
}

#wrapper{
padding-top: 50px;
padding-bottom: 50px;
width: 1200px;
margin: 0 auto;
position: relative;
background: #EEE;
}

JS:

function moveRibbonLeft(){
$(this).unbind("click", moveRibbonLeft);
$(this).animate({left: -1400}, 200, function(){
    $(this).bind("click", moveRibbonRight);    
});
}

function moveRibbonRight(){
$(this).unbind("click", moveRibbonRight);
$(this).animate({left: 0}, 200, function(){
    $(this).bind("click", moveRibbonLeft);    
});
}

function moveRibbonLeft2(){
$(this).unbind("click", moveRibbonLeft2);
$(this).animate({left: -1520}, 200, function(){
    $(this).bind("click", moveRibbonRight2);    
});
}

function moveRibbonRight2(){
$(this).unbind("click", moveRibbonRight2);
$(this).animate({left: -120}, 200, function(){
    $(this).bind("click", moveRibbonLeft2);    
});
}

$(document).ready(function(){
$("#blueRibbon").bind("click", moveRibbonRight);
$("#blueRibbon2").bind("click", moveRibbonRight2);  
});

どんな助けでも大歓迎です:)

PS私は多くのコードがきれいとはほど遠いことを知っていますが、私はこの段階でテストしているだけです:)

4

1 に答える 1

3

クリック イベントの x、y 座標をキャプチャし、見えないブロッカーの下にあるどの要素が同じ画面スペースに収まるかを確認し、それぞれの要素でクリック イベントをトリガーします。

とは言え、これはばかげている。人々に何かをクリックしてもらいたいのであれば、人々の前に物を置いてはいけません。

于 2013-02-01T19:56:53.023 に答える