Ä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?

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');

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.


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;
}


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;
}

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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.