ansaurus

Question

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

Answer 1

+1 A:

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.

animuson 2010-04-20 19:56:40

I agree with your point, but in this instance I'm just weighing my options to add a bit of non-essential eye candy. The transparent PNG is a drop shadow that I want to cover the top few pixels of the content inside a scrollable box. Those are the few pixels that I'd like to able to click "through."

Mike 2010-04-20 20:03:58

There are better ways to do it, like putting all of your links inside a giant division that has the drop-shadow background image in it, or even using the nth-child CSS selector to select only the first or last links in the division to apply a drop shadow background image.

animuson 2010-04-20 20:30:48

Answer 2

+1 A:

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.

MrHen 2010-04-20 21:14:14

Answer 3

+1 A:

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.]

JoeFlash 2010-04-20 21:18:27

ansaurus

tags:

views:

answers:

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

related questions