web-dev-qa-db-fra.com

Rendre le fond de superposition cliquable

Existe-t-il un moyen, en CSS, de rendre un élément cliquable? J'ai un absolutely positionné <div> Couvrant un lien. J'aimerais pouvoir cliquer sur le lien à travers la superposition <div>. La superposition a un fond principalement transparent et le lien n'a pas de pixels de couverture.

J'ai essayé background: url('...') transparent, mais en vain.

Ici est un JSFiddle démontrant mon problème. Le lien peut être cliqué dans IE8, mais pas dans FireFox. Ce que je veux faire, c'est faire un ticker d'image dans le div #underlay. La superposition est de sorte que je puisse avoir un arrière-plan avec un dégradé de solide à transparent en bas et en haut, afin que je puisse faire en sorte que les images `` défilent en rien '', sans décolorer le entier image à la fois, si cela a du sens (si quelqu'un a un Android téléphone, essayez de faire défiler vos mémos et regardez le haut/bas de l'écran - le les mémos ne se fondent en rien).

cssbackgroundtransparent
29
Bojangles

J'ai résolu votre problème en ajoutant pointer-events: none; au bloc absolu.

body {
  margin: 0;
  padding-left: 10px;
  font: 20px Arial, sans-serif;
  line-height: 30px;
}
a:hover {
  color: red;
}
#overlay-blocking,
#overlay-passing{
  position: absolute;
  height: 30px;
  width: 10em;
  left: 0;
}

#overlay-blocking {
  top: 30px;
  background: rgba(0,100,0, .2);    
  pointer-events: none;
}
#overlay-passing {
  top: 0;
  background: rgba(100,0,0, .2);    
}
<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>    

<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
53
tibalt

Je ne pense pas que ce soit possible, car une image est toujours une boîte complète. Mais avez-vous essayé ces Images Maps ? On dirait que c'est ce que vous voulez.

AUTRE OPTION

Vous pouvez également séparer votre image en 2 et vous assurer que vos boîtes ne superposent pas votre lien bien sûr.

2
Marnix

Peut-être que cette réponse vous serait utile, si vous pouvez imbriquer la superposition à l'intérieur du lien: Avec seulement CSS, est-il possible de déclencher: survoler et cliquer sur des événements sous un élément?

1
Scott Cranfill