Cambia il cursore del mouse al passaggio del mouse in uno stile di ancoraggio


109

Se passo il mouse su un, divil cursore del mouse verrà cambiato nel cursore come quello nell'ancora HTML.

Come posso fare questo? Ho bisogno di Javascript o è possibile solo con CSS?

Risposte:


221

Supponendo che il tuo divabbia un fileid="myDiv" , aggiungi quanto segue al tuo CSS. I cursor: pointerspecifica che il cursore dovrebbe essere la stessa icona mano che è utilizzato per ancoraggi (hyperlink):

CSS da aggiungere

#myDiv
{
    cursor: pointer;
}

Puoi semplicemente aggiungere lo stile del cursore al tuo divHTML in questo modo:

<div style="cursor: pointer">

</div>

MODIFICARE:

Se sei determinato a usare jQuery per questo, aggiungi la seguente riga al tuo $(document).ready()o body onload: (sostituisci myClasscon qualsiasi classe tutta la tua divcondivisione s)

$('.myClass').css('cursor', 'pointer');

Voglio farlo con jquery non css
semplice il

7
@guru: non c'è bisogno di scripting. Tutto quello che devi fare è aggiungere style="cursor: pointer"al tuo divHTML. Modificherò la mia risposta con un esempio.
Devin Burke

Ci sono cinque divisioni con la stessa classe, non posso aggiungere a tutto questo "style =" cursor: pointer "
agilmente

@guru, se tutti i div hanno la stessa classe, puoi effettivamente aggiungere "cursore: puntatore" alla regola CSS per quella classe nel file CSS della tua pagina
attacca il

1
se il problema è quello del targeting, allora come Justin ha già chiesto, e come tutti devono sempre chiedere, PUBBLICA IL CODICE così possiamo aiutarti ad allegarlo
Sinetheta

24

Se vuoi farlo in jQuery invece che in CSS, segui fondamentalmente lo stesso processo.

Supponendo che tu ne abbia alcuni <div id="target"></div>, puoi usare il seguente codice:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

E così dovrebbe andare.


3
Questo è superfluo perché il cursore di a divè visibile solo quando il mouse è sopra di esso. Non c'è alcun motivo per rimuoverlo una volta che l'utente si sposta perché il cursore non sarebbe comunque visibile in quel momento.
Devin Burke

2
Sebbene la domanda sia stata posta in modo molto restrittivo (sui DIV), questa risposta si applica ampiamente. È utile per qualsiasi elemento HTML come tabelle, <p>, pulsanti, ecc. Ecco perché ho fatto +1.
PeteH

10

In realtà non hai bisogno di jQuery, solo CSS. Ad esempio, ecco un po 'di HTML:

<div class="special"></div>

Ed ecco il CSS:

.special
{
    cursor: pointer;
}


0

Penso che :hovermancasse nelle risposte di cui sopra. Quindi seguire farebbe il necessario (se css fosse richiesto)

#myDiv:hover
{
    cursor: pointer;
}

Ha funzionato per me senza: hover, e presumibilmente molti di più poiché la risposta ha molti voti positivi. Hai provato?
dading84

sì, ignora questa risposta
being_ethereal
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.