1

我有两个重叠的元素，一个在另一个之上。顶部元素的一半是完全透明的（不透明度 = 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

Just capture the x,y coords of the click event and check which of your elements underneath the invisible blocker fit in the same screen space, then trigger the click event on the respective element.

That being said, this is silly. If you want people to click on things, you shouldn't put things in front of them.

于 2013-02-01T19:56:53.023 回答