Cursor auf Fingerzeiger ändern

234

Ich habe dies aund ich weiß nicht, dass ich es in den "onmouseover" einfügen muss, damit der Cursor wie ein normaler Link zum Fingerzeiger wechselt:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

Ich habe irgendwo gelesen, was ich sagen muss:

onmouseover="cursor: hand (a pointing hand)"

Aber es funktioniert nicht bei mir.

Außerdem bin ich mir nicht sicher, ob dies als JavaScript, CSS oder einfach nur HTML betrachtet wird.

Dvir Levy
quelle
Es ist CSS und das Onmouseover-Ereignis ist ein Javascript-Ereignis.
Scott
Sie setzen CSS nicht direkt in onmouseover = "" ein. Außerdem sollte Cursor: Hand beim Bewegen des Mauszeigers über Ihren Link die Standardaktion sein. Wenn dies nicht der Fall ist, liegt möglicherweise ein anderes Problem vor.
Panzer
3
lol "Hand ..... eine zeigende Hand!" haha sorry, ich konnte nicht widerstehen.
Christine

Antworten:

458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

Es ist CSS.

Oder in einem Stylesheet:

a.menu_links { cursor: pointer; }
Scott
quelle
2
Nach dem Testen scheint es notwendig zu sein, sowohl onmouseover = "" AND style = cursor: pointer; "zu haben. Wenn Sie nur das style-Tag haben, verschwindet der Zeigerzeiger-Cursor nach einem Klick auf den Standardzeiger. Guter Beitrag Scott, danke.
Nubtacular
1
@DnfD brauchen Sie nur, onmouseoverwenn es keine href Definition gibt. Wenn Sie wie ein Standard - Anker, es ist eine hrefDefinition, die onmouseovernicht notwendig ist .
Scott
@DnfD Die akzeptierte Antwort ist wirklich schrecklich. es macht den Job, ist aber nicht klar. entfernen mouseover=""und style="cursor: pointer;"lassen class="menu_links" es wird funktionieren! egal ob drin hrefist oder nicht.
Jarett Lloyd
@Scott nein, du brauchst das mouseoverEvent dort nicht. siehe meinen vorherigen Kommentar zu DnfD
Jarett Lloyd
@JarettLloyd hängt stark von der Browserunterstützung und der CSS-Konstruktion ab. Dies ist eine Antwort von 2012 . Die Dinge haben sich in mehr als 6 Jahren geändert.
Scott
52

Sie können dies in CSS tun:

a.menu_links {
    cursor: pointer;
}

Dies ist eigentlich das Standardverhalten für Links. Sie müssen es entweder an anderer Stelle in Ihrem CSS überschrieben haben oder es enthält kein hrefAttribut (es fehlt in Ihrem Beispiel).

Joseph Silber
quelle
Ich habe keine href coz ich möchte die Seite nicht verlassen. Es ist ein Link, der eine JS-Funktion auslöst. Wenn ich href = "#"
Dvir Levy
2
@DvirLevy - Also entweder false zurückgeben und verwenden href="#", oder verwenden Sie einfach das CSS, wie ich Ihnen gezeigt habe ...
Joseph Silber
22

Ich benutze diesen gerne, wenn ich nur einen Link auf der Seite habe:

onMouseOver="this.style.cursor='pointer'"
fooschnikens
quelle
8

in CSS schreiben

a.menu_links:hover{ cursor:pointer}
Mandeep Pasbola
quelle
7

Hier ist etwas Cooles, wenn Sie damit die Extrameile gehen wollen. In der URL können Sie einen Link verwenden oder ein Bild-PNG speichern und den Pfad verwenden. beispielsweise:

URL ('Assets / Imgs / theGoods.png');

unten ist der Code:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Dies funktioniert also nur unter der Größe 128 x 128, größer und das Bild wird nicht geladen. Sie können aber praktisch jedes gewünschte Bild verwenden! Dies wäre reines CSS3 und etwas HTML. Alles, was Sie in HTML tun müssen, ist

<div class='cursor'></div>

und nur in diesem div wird dieser Cursor angezeigt. Also füge ich es normalerweise dem Body-Tag hinzu.

Michael Barreiro
quelle
6

Ich denke, dass die oben genannte "beste Antwort", obwohl programmatisch korrekt, die gestellte Frage nicht wirklich beantwortet. In der Frage wird gefragt, wie der Zeiger im Mouseover-Ereignis geändert werden soll. Ich sehe Beiträge darüber, wie man irgendwo einen Fehler haben kann, der die Frage nicht beantwortet. In der akzeptierten Antwort ist das Mouseover-Ereignis leer ( onmouseover="") und stattdessen ist die Stiloption enthalten. Verblüffend, warum dies getan wurde.

An dem Link des Anfragenden ist möglicherweise nichts auszusetzen. Betrachten Sie das folgende HTML:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Wenn ein Benutzer mit der Maus über diesen Link fährt, ändert sich der Zeiger nicht in eine Hand. Stattdessen verhält sich der Zeiger so, als würde er über normalem Text schweben. Man möchte das vielleicht nicht ... und so muss der Mauszeiger angewiesen werden, sich zu ändern.

Die gesuchte Antwort lautet: (die von einem anderen gepostet wurde):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

Dies ist jedoch ... ein Albtraum, wenn Sie viele davon haben oder diese Art von Dingen überall verwenden und sich entscheiden, eine Art Änderung vorzunehmen oder auf einen Fehler zu stoßen. besser eine CSS-Klasse dafür zu machen:

a.lendhand {
  cursor: pointer;
}

dann:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

Es gibt viele andere Möglichkeiten, die wohl besser wären als diese Methode. DIV s, BUTTON s, IMG s, etc könnte mehr als nützlich erweisen. Ich sehe jedoch keinen Schaden in der Verwendung <a>...</a>.

Jarett.

Jarett Lloyd
quelle
4

Fügen Sie ein hrefAttribut hinzu, um es zu einem gültigen Link zu machen, und return false;im Ereignishandler, um zu verhindern, dass es eine Navigation verursacht.

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Oder machen Sie die displayData()Rückgabe falsch und ..="return displayData(..)

Alex K.
quelle
3

Die Lösung über reines CSS, wie in der als am besten gekennzeichneten Antwort angegeben, ist für diese Situation nicht geeignet.

Das Beispiel in diesem Thema hat kein normales statisches href-Attribut, es ruft nur JS auf, daher wird es ohne JS nichts tun.

Es ist also gut, den Zeiger nur mit JS einzuschalten. Also Lösung

onMouseOver="this.style.cursor='pointer'"

wie oben erwähnt (aber ich kann es dort nicht kommentieren) ist das beste in diesem Fall. (Aber im Allgemeinen ist es für normale Links, die kein JS erfordern, besser, mit reinem CSS ohne JS zu arbeiten.)

Martin Adámek
quelle
-1

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}
<div> im Pointer  cursor </div> 
<p> im Txst cursor </p> 

Omar bakhsh
quelle