如何使其成为完全可点击的DIV

Question

I'm using JQuery to hide a DIV when the following DIV is clicked

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

which works fine in Firefox but not in IE. I can click the whole DIV in Firefox but in IE, only the border.

$(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>

Any help is appreciated.

Answer 1

Likely problem: An element with no background (or background-color: transparent ) will not trigger click events in IE (6-8 at least, not sure about 9) when clicking that (non-)background.

Workarounds:

1) If you don't need transparent background:

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

2) If you don't need the border or any text content:

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

... makes the entire element transparent, but clickable.

3) If you only need IE9, Firefox 3, Safari 3 and Opera 10 compatibility (any Chrome goes):

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

... makes only the background color transparent - text, border etc. remains solid. The entire element will be clickable.

4) If you need transparent background, "full" compatibility with older browsers, and borders or text content:

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

... where 1-pixel-transparent.gif is what it says it is.

In your case, the likely option would probably be no. 4.