Avec seulement CSS, est-il possible de déclencher des événements:hover et click sous un élément?

pourquoi ne pas mettre l'image en arrière-plan (vous savez, comme la propriété background-image qu'ils ont construit pour cette raison)? La seule façon de le faire est d'utiliser des scripts très avancés qui ralentiraient votre page, ce qui n'en vaudrait pas la peine. Vous ne devriez pas mettre une image sur vos liens.

une option serait d'utiliser :hover pour faire avancer z-index des étiquettes de lien au-dessus du PNG.

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

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

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

Je n'ai pas testé ceci mais j'imagine qu'il aura les liens derrière l'ombre quand le conteneur n'est pas en vol stationnaire mais tirera les liens avant l'ombre quand le conteneur est en vol stationnaire.

tout d'abord, il ne devrait pas y avoir de raison pour que vous ne puissiez pas placer la transparence au premier plan dans le lien lui-même, et ainsi éviter le problème Impossible à cliquer. Prenons un exemple simple:

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

avec la nouvelle couche cela devient alors:

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

(j'ai ajouté des noms de classe pour aider avec l'illustration de codage.)

la superposition serait alors stylisée et positionnée absolument au-dessus du contenu du lien original. Le morceau de code de superposition est en ligne et suit le morceau qui appartient à l'arrière-plan, donc il va naturellement se superposer au-dessus du code précédent sans codage supplémentaire.

la première chose à faire est d'appliquer quelques propriétés de formatage à l'ancre pour maintenir l'ancre en ligne mais accepter les éléments internes à positionnement absolu. (- Moz - commande est à l'appui de FireFox 2.)

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

Ensuite, placez votre couche décorative semi-transparente sur le bouton.

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

le _background: propriété est un hack pour supprimer l'image semi-transparente de l'affichage sur Internet Explorer 6 versions car il ya un problème inhérent avec ce navigateur prise en charge des images PNG transparentes. Une image GIF régulière pourrait également être substituée si une image alternative est disponible pour l'affichage IE6.

Une autre chose que vous devez faire est de vous assurer que tout le contenu dans le lien fournit le bon curseur interraction. (Certains navigateurs, en particulier certaines versions D'Internet Explorer, ne fournissent pas les modifications attendues du curseur pour le balisage dans les liens.)

a:hover * {
    cursor: pointer;
}

votre deuxième option pourrait être d'utiliser une bibliothèque JavaScript pour fournir le traitement d'événement au-delà du HTML de base. La raison pour laquelle je suggère une bibliothèque JavaScript est que la plupart des navigateurs ne prennent pas correctement en charge les méthodes CSS version 2 où vous pouvez appliquer la pseudo-classe :hover à des éléments du DOM autres que les ancres. Best la façon d'aborder cette prise en charge pour le moment est d'utiliser les bibliothèques.

j'aime particulièrement jQuery et l'ajout de cette hover propriété peut être aussi simple que:

$("#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"); }
);

Alternativement, vous pouvez faire un clic sur la couche div agir comme un clic sur le lien:

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

[La référence à #button_block est en supposant que les deux objets se trouver dans le même wrapper avec un ID de button_block, et .layer_object est le div indépendant placé sur lien.]

ce problème a été résolu ici: , Cliquez sur à travers une DIV éléments qui sous-tendent