Faire un fond de superposition cliquer-à-travers-pouvoir [dupliquer]
cette question a déjà une réponse ici:
Est-il un moyen, dans le CSS, je peux faire un élément sur-mesure. J'ai un absolute ly positionné <div> couvrant un lien. Je voudrais être en mesure de cliquer le lien par l'incrustation <div> . La superposition a un fond pour la plupart 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 est de faire un téléscripteur d'image dans le div #underlay . La superposition est afin que je puisse avoir un arrière-plan avec un gradient de solide à transparent sur le bas et le haut, de sorte que je peux faire les images sorte de "scroll into nothing", sans faner l'image entier à la fois, si cela a du sens (si quelqu'un a un téléphone android, essayer de défiler vos mémos et regarder le haut/bas de l'écran - Les mémos se fanent en rien).
3 réponses
j'ai corrigé 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>Je ne pense pas que ce soit possible, parce qu'une image est toujours une boîte complète. Mais avez-vous essayé ces images Maps ? Semble que c'est ce que vous voulez.
AUTRE OPTION
vous pouvez également séparer votre image en 2, et assurez-vous que vos boîtes ne se superposent pas votre lien bien sûr.
peut-être que cette réponse vous sera utile, si vous pouvez insérer la superposition à l'intérieur du lien: avec seulement CSS, est-il possible de déclencher :hover et cliquez sur Événements sous un élément?