Come si fa a rendere l'area di un div cliccabile? Non tutto il div!

Question

Se si dispone di un'immagine di sfondo in un div con un pulsante (disegnato) nel mezzo e alcuni altri disegni attorno ad esso. Come si fa a rendere il pulsante selezionabile ma non all'intero div perché non voglio che l'utente faccia clic sui disegni attorno ad esso, se questo ha senso !? Sto sprecando il mio tempo giocando con padding e margini? Devo solo creare due div? Il mio capo dice che è riuscito a farlo usando un div prima.

Acclamazioni

Answer 1

Mettere un elemento che è trasparente e posizionato relativamente all'interno del div. Posizionarlo nella parte superiore del pulsante e renderlo della stessa dimensione del pulsante. Rendi in grado l'elemento di cliccare.

Answer 2

In breve - non lo fanno.

Gli sfondi sono sfondi. Non sono contenti. Non sono interattivi.

È possibile aggirarlo, ma non si dovrebbe. Se hai qualche contenuto con cui l'utente può interagire, presentalo come contenuto. Utilizzare uno <img>.

Answer 3

Si potrebbe fare il div "position: relative" e poi inserire un tag < > sul disegno utilizzando

display: block; 
width: your_width; 
height: your_height; 
position: absolute; 
left: your_position_x; 
top: your_position_y; 

Questo sarebbe il modo più pulito.

Answer 4

provare questo codice:

#container { width:200px; height:100px; position:relative } 
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; } 

<div id="container"> 
    <a id="clicker" href="#link"></a> 
</div> 

modificare Ovviamente tutte le dimensioni in modo che corrisponda l'area che si desidera rendere cliccabile.