Ändern Sie den Mauszeiger bei gedrückter Maus in einen ankerartigen Stil

109

Wenn ich die Maus über eine divMaus bewege, wird der Mauszeiger wie im HTML-Anker in den Cursor geändert.

Wie kann ich das machen? Benötige ich Javascript oder ist es nur mit CSS möglich?

shibly
quelle

Antworten:

221

Angenommen, Sie divhaben eine id="myDiv", fügen Sie Ihrem CSS Folgendes hinzu. Das cursor: pointergibt an, dass der Cursor dasselbe Handsymbol sein soll, das für Anker (Hyperlinks) verwendet wird:

CSS zum Hinzufügen

#myDiv
{
    cursor: pointer;
}

Sie können den Cursor-Stil einfach wie folgt zum divHTML- Code hinzufügen :

<div style="cursor: pointer">

</div>

BEARBEITEN:

Wenn Sie entschlossen sind, jQuery dafür zu verwenden, fügen Sie Ihrem $(document).ready()oder body die folgende Zeile hinzu onload: (Ersetzen Sie myClassalle Ihre divAnteile durch eine beliebige Klasse. )

$('.myClass').css('cursor', 'pointer');
Devin Burke
quelle
Ich möchte dies mit jquery nicht css tun
möglicherweise
7
@ Guru: Es besteht keine Notwendigkeit für Skripte. Alles, was Sie tun müssen, ist style="cursor: pointer", Ihrem divHTML-Code hinzuzufügen . Ich werde meine Antwort mit einem Beispiel bearbeiten.
Devin Burke
Es gibt fünf Abteilungen mit derselben Klasse, ich kann nicht zu all diesen "style =" cursor: pointer "
hinzufügen
@ Guru, wenn alle Divs dieselbe Klasse haben, können Sie der CSS-Regel für diese Klasse in der CSS-Datei Ihrer Seite tatsächlich "cursor: pointer" hinzufügen
Angriff
1
Wenn das Problem das Targeting ist, dann, wie Justin bereits gefragt hat und wie jeder immer fragen muss, POSTEN SIE DEN CODE, damit wir Ihnen helfen können, ihn anzuhängen
Sinetheta
24

Wenn Sie dies in jQuery anstelle von CSS tun möchten, folgen Sie im Grunde dem gleichen Prozess.

Angenommen, Sie haben welche <div id="target"></div>, können Sie den folgenden Code verwenden:

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

und das sollte es tun.

Ryan Atallah
quelle
3
Dies ist überflüssig , weil der Cursor für eine divist nur sichtbar , wenn die Maus über sie ist. Es gibt keinen Grund, es zu entfernen, sobald der Benutzer den Mauszeiger entfernt hat, da der Cursor zu diesem Zeitpunkt ohnehin nicht angezeigt wird.
Devin Burke
2
Während die Frage sehr eng gestellt wurde (über DIVs), gilt diese Antwort allgemein. Es ist nützlich für jedes HTML-Element wie Tabellen, <p>, Schaltflächen usw. Deshalb habe ich es + 1 gemacht.
PeteH
10

Sie brauchen jQuery eigentlich nicht, nur CSS. Hier ist zum Beispiel etwas HTML:

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

Und hier ist das CSS:

.special
{
    cursor: pointer;
}
Attacke
quelle
6

Dieser Wille

#myDiv
{
    cursor: pointer;
}
Sinetheta
quelle
0

Ich denke :hover, in den obigen Antworten fehlte. Das Folgende würde also das Notwendige tun (wenn CSS erforderlich wäre)

#myDiv:hover
{
    cursor: pointer;
}
Sein_ätherisch
quelle
Arbeitete für mich ohne: hover und vermutlich noch viel mehr, da die Antwort viele positive Stimmen hat. Hast Du es versucht?
dading84
Ja, ignoriere diese Antwort
being_ethereal