如何使这个完全可点击的DIV

时间:2012-02-09 22:34:52

标签: jquery css

我在点击以下DIV时使用JQuery来隐藏DIV

.up_link {
    position: absolute;
    width: 830px;
    height: 500px;
    z-index: 8;
    text-align: center;
    cursor: pointer;
    border: 3px solid #000;
}

在Firefox中运行良好,但在IE中运行不正常。我可以在Firefox中点击整个DIV但在IE中只能点击边框。

$(function() {
$(".down_link").click(function() {
    $(".gallery_block2").stop(true, true).hide().animate({ marginTop: 0 }, 400).fadeTo(500,1).show();
});

$(".up_link").click(function() {
    $(".gallery_block2").stop(true, true).fadeTo(500,0).show().animate({ marginTop: -550 }, 400);
});
});

HTML

    <div class="gallery_block2">
        <div class="gallery_thumbs">
            <div class="gallery_close_container up_link"></div>
            <div class="load_space"></div>
        </div>
    </div>

感谢任何帮助。

1 个答案:

答案 0 :(得分:4)

可能的问题:没有背景的元素(或background-color: transparent)在点击(非)背景时不会触发IE中的点击事件(至少6-8,不确定9)。

解决方法:

1)如果您不需要透明背景:

background-color: #000000; /* Color of whatever's behind the <div> */

2)如果您不需要边框或任何文字内容:

background-color: #000000;
filter: alpha(opacity = 0);
opacity: 0;
/* And vendor prefixes for older browsers, e.g. -moz-opacity */

...使整个元素透明,但可点击。

3)如果您只需要IE9,Firefox 3,Safari 3和Opera 10兼容性(任何Chrome都可以):

background-color: rgba(0, 0, 0, 0); /* Black but completely transparent */

...仅使背景颜色透明 - 文本,边框等保持稳定。整个元素都是可点击的。

4)如果您需要透明背景,与旧浏览器“完全”兼容,以及边框或文本内容:

background-image: url("1-pixel-transparent.gif");

...其中1-pixel-transparent.gif就是它所说的。

在您的情况下,可能的选择可能是否定的。 4。