With only CSS, is it possible to trigger :hover and click events underneath an element?

I have a semi-tra开发者_如何转开发nsparent PNG as a background image for a div that that I'm placing over some links. As a result, the links aren't clickable. Is there a way I can hover and click "through" the div that's on top? (BTW, to position to foreground div I'm using absolute positioning and z-index.)

Thanks! Mike

Why not put the image in the BACKGROUND (you know, like the background-image property that they built for that reason)? The only way to do that is with some highly advanced scripting which would slow your page down, not worth it. You shouldn't be putting an image over your links.

One option would be to use :hover to bring the z-index of the link tags forward above the PNG.

div.container .links {
  z-index:0;
}

div.container .background {
  z-index:1;
}

div.container:hover .links {
  z-index:2;
}

I haven't tested this but I imagine it will have the links behind the shadow when the container isn't hovering but will pull the links before the shadow when the container is hovering.

First, there shouldn't be any reason why you could not put the foreground transparency within the link itself, and thereby avoid the un-clickable problem. Let's take a simple example:

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /></a>

With the new layer this then becomes:

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span></a>

(I've added class names to aid with coding illustration.)

The overlay would then be styled and positioned absolutely above the original link content. The overlay code piece is inline and follows the piece that belongs in the background, therefore it will naturally get layered above the prior code without extra coding.

The first thing to do is to apply some formatting properties to the anchor to keep the anchor inline but accept internal absolute-positioned elements. (The -moz- command is to support FireFox 2.)

.layered_button {
    display: -moz-inline-block;
    display: inline-block;
}

Then position your decorative semi-transparent layer over the button.

.button_overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: XXpx;
    height: XXpx;
    background: url('xxxx.png') no-repeat 0px 0px;
    _background-image: none;
}

The _background: property is a hack to remove the semi-transparent image from display on Internet Explorer 6 versions since there is an inherent problem with this browsers support of transparent PNG images. A regular GIF image could also be substituted if an alternate image is available for IE6 display.

One additional thing you should do is make sure all the content within the link provides the proper cursor interraction. (Some browsers, especially some Internet Explorer versions, do not provide expected cursor changes for markup within links.)

a:hover * {
    cursor: pointer;
}

Your second option might be to use a JavaScript library to provide event handling beyond the basic HTML. The reason I suggest a JavaScript library is that most browsers still do not properly support CSS version 2 methods where you can apply the pseudo-class :hover to elements of the DOM other than anchors. The best way to approach this support for now is using libraries.

I particularly like jQuery and adding this hover property can be as easy as:

$("#button_block .layer_object").hover( // div layer hover action
    function(){ }, // MouseOver
    function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
    function(){ window.location = $("#button_block .layered_button").attr("href"); }
);

Alternately, you can make a click on the div layer act as a click on the link with:

$("#button_block .layer_object").click( // div click = anchor click
    function(){ $("#button_block .layered_button").click(); }
);

[The reference to #button_block is assuming the two objects reside in the same wrapper with an ID of button_block, and .layer_object is the independent div placed over the link.]

this problem was solved here: Click through a DIV to underlying elements