wie man den Cursorstil auf Zeiger für Links ohne hrefs setzt

135

Ich habe viele <a>HTML-Tags ohne das hrefAttribut für onclickJavascript-Aufrufe. Diese Links haben keinen Zeigerstil des Cursors. Sie haben einen Textstil-Cursor.

Wie kann ich den Cursorstil auf Zeiger für Links setzen, ohne das hrefAttribut zu verwenden?

Ich weiß, dass ich href = "#" hinzufügen kann. Ich habe dies an vielen Stellen im HTML-Dokument und möchte wissen, wie man einen Cursor-Zeiger für Links erstellt, ohne das hrefAttribut zu verwenden.

javascript html css hyperlink cursor Kevin
quelle
Übrigens, wenn Sie Link sagen, meinen Sie damit "<a id="do_some_javascript"> test </a>"? Oder ist es nur ein span- oder div-Tag, das Javascript ausführt?
Alxandr

Antworten:

211

Fügen Sie dies in Ihre CSS-Datei ein ....

a:hover {
 cursor:pointer;
}

Wenn Sie keine CSS-Datei haben, fügen Sie diese dem HEAD Ihrer HTML-Seite hinzu

<style type="text/css">
 a:hover {
  cursor:pointer;
 }
</style>

Sie können auch das Attribut href = "" verwenden, indem Sie am Ende Ihres Javascript false zurückgeben.

<a href="" onclick="doSomething(); return false;">a link</a>

Das ist aus vielen Gründen gut. SEO oder wenn Leute kein Javascript haben, wird das href = "" funktionieren. z.B

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@siehe http://www.alistapart.com/articles/behavioralseparation

Bearbeiten: Erwähnenswert ist die Antwort von @ BalusC, in der er erwähnt :hover, dass sie für den Anwendungsfall des OP nicht erforderlich ist. Obwohl andere Stile mit dem :hoverSelektor hinzugefügt werden können .

Ross
quelle
5
Die Verwendung von: hover ist nicht erforderlich und es wird nicht garantiert, dass Links ohne href bearbeitet werden.
Alxandr
Ich kann mir nicht vorstellen, wo es nicht funktionieren würde. Dies ist ein guter Weg, um zu lernen. Möglicherweise möchten Sie andere Verhaltensweisen hinzufügen, die den Verknüpfungen mit einem href-Attribut ähneln: Hintergrundänderung, Unterstreichung, Farbe usw.
Ross
1
Es ist schon eine Weile her, seit ich dies verwendet habe, aber für <IE6 könnte es sich lohnen, einen bedingten Kommentar hinzuzufügen, um auf Stile mit cursor: hand;
David sagt, Monica wird am
Sie benötigen keinen bedingten Kommentar - machen Sie einfach .myStyle {cursor: hand; cursor: pointer;} - neuere Browser ignorieren das Handattribut, da sie es sowieso nicht verstehen. Auch IE6 wird noch Zeiger verstehen - Hand ist für ie5 und darunter.
Easwee
Die Verwendung eines a an sich kann jedoch einige Probleme verursachen. Besonders im IE, weil sie OnBeforeUnload auslösen, obwohl Sie return false hinzufügen. Sogar ein Link zu Javascript: void (0); bewirkt, dass OnBeforeUnload aufgerufen wird. Ich hatte große Kopfschmerzen mit diesem Problem bei der Arbeit ...
Alxandr
16

Fügen Sie dies einfach Ihrem globalen CSS-Stil hinzu:

a { cursor: pointer; }

Auf diese Weise sind Sie nicht mehr vom Standard-Cursor-Stil des Browsers abhängig.

BalusC
quelle
Funktioniert nicht Der Cursor wird in textstatt pointerin Chrome geändert .
ZhekaKozlov
8

style = "Cursor: Zeiger;"

mxmissile
quelle
6

So ändern Sie den Cursor von einem Pfeil zu einer Hand, wenn Sie mit der objectMaus über ein bestimmtes (myObject) fahren.

myObject.style.cursor = 'pointer';
Lou
quelle
1
Zunächst einmal willkommen bei SO, Lou! Achten Sie beim Posten / Beantworten darauf, dass Sie so informativ wie möglich sind, und vergessen Sie nicht, Ihre Codebeispiele zu formatieren (wie ich es für Sie getan habe).
Brian
4

Geben Sie allen eine gemeinsame Klasse (zum Beispiel Link). Dann fügen Sie in CSS-Datei:

.link { cursor: pointer; }

Oder wie von @mxmissile vorgeschlagen, inline mit style = "cursor: pointer;"

Alxandr
quelle
4

Erstellen Sie eine Klasse mit dem folgenden CSS und fügen Sie sie mit onclick-Ereignissen zu Ihren Tags hinzu:

cursor:pointer;
Dan
quelle
3

Verwenden Sie CSS, cursor: pointerwenn ich mich richtig erinnere.

Entweder in Ihrer CSS-Datei:

.link_cursor
{
    cursor: pointer;
}

Fügen Sie dann einfach den folgenden HTML-Code zu allen Elementen hinzu, für die der Link-Cursor verwendet werden soll: class="link_cursor" (die bevorzugte Methode.)

Oder verwenden Sie Inline-CSS:

<a style="cursor: pointer;">
Andy Shellam
quelle
1

Winkelversion:

<a (click)="action(); $event.preventDefault()" href="#">Action</a>
Chachan
quelle
0

Das hat bei mir funktioniert:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>
BabaRick
quelle