hrefs içermeyen bağlantılar için imleç stilini işaretçiye ayarlama

135

Javascript çağrıları yapma özelliği <a>olmadan html etiketleri bir sürü var . Bu bağlantıların imleç imleç stili yoktur. Metin stili imleçleri var.hrefonclick

hrefÖzniteliği kullanmadan imleç stilini bağlantılar için işaretçiye nasıl ayarlayabilirim ?

Href = "#" ekleyebileceğimi biliyorum. Ben html belgesinde birçok yerde bu var ve nasıl hreföznitelik kullanmadan bağlantılar için imleç tarzı işaretçi yapmak bilmek istiyorum .

— kevin
kaynak

Hoşçakalın, bağlantı derken "<a id="do_some_javascript"> test </a>" gibi bir şey mi demek istediniz? Yoksa sadece javascript yapan bir span veya div etiketi mi?

— Alxandr

211

css dosyanıza bunu ekleyin ....

a:hover {
 cursor:pointer;
}

bir css dosyanız yoksa, bunu HTML sayfanızın HEAD'ına ekleyin

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

ayrıca, javascriptinizin sonunda false döndürerek href = "" özelliğini kullanabilirsiniz.

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

bu birçok nedenden dolayı iyidir. SEO veya insanlar javascript yoksa, href = "" çalışacaktır. Örneğin

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

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

Düzenleme: BalusC en @ belirterek Worth cevap o söz :hoverOP'ın kullanım örneği için gerekli değildir. :hoverSeçici ile başka bir stil eklenebilir .

— Ross
kaynak

5

Kullanımı: fareyle üzerine gelme gerekli değildir ve bir href olmadan bağlantılar üzerinde çalışacağı garanti edilmez.

— Alxandr

Nerede işe yaramayacağını hayal edemiyorum. Bu, öğrenmenin iyi bir yoludur, href niteliğine sahip bağlantılara benzer başka ekleme davranışlarına sahip olmak isteyebilirsiniz: arka plan değişikliği, alt çizgi, renk, et al.

— Ross

1

Bunu kullandığımdan bu yana bir süre geçti, ancak <IE6 için stilleri bağlamak için koşullu bir yorum eklemeye değer olabilircursor: hand;

— David, Monica

Koşullu yoruma ihtiyacınız yoktur - sadece .myStyle {imleç: el; imleç: işaretçi;} - yeni tarayıcılar zaten anlamadıkları için el niteliğini yok sayarlar. Ayrıca IE6 hala işaretçiyi anlayacaktır - el ie5 ve altı içindir.

— easwee

Bir a'nın kendi içinde kullanılması bazı sorunlara neden olabilir. Özellikle IE'de, dönüş false ekleseniz bile OnBeforeUnload'u tetikledikleri için; Javascript bağlantısı bile: void (0); OnBeforeUnload öğesinin çağrılmasına neden olur. İşte bu problemle büyük bir baş ağrım vardı ...

— Alxandr

16

Bunu global CSS stilinize ekleyin:

a { cursor: pointer; }

Bu şekilde, artık tarayıcının varsayılan imleç stiline bağımlı olmazsınız.

— BalusC
kaynak

Çalışmıyor. İmleç, Chrome textyerine yerine olarak değiştirildi pointer.

— ZhekaKozlov

8

style = "imleç: işaretçi;"

— mxmissile
kaynak

6

Belli bir imleci object(myObject) üzerine getirdiğinizde imleci bir oktan bir ele nasıl değiştirirsiniz .

myObject.style.cursor = 'pointer';

— Lou
kaynak

1

İlk uzakta, SO hoş geldiniz, Lou! Gönderirken / yanıtlarken lütfen olabildiğince bilgilendirici olduğunuzdan emin olun ve kod örneklerinizi biçimlendirmeyi unutmayın (sizin için yaptığım gibi).

— Brian

4

Hepsine ortak bir sınıf verin (örneğin bağlantı). Sonra css dosyasına ekleyin:

.link { cursor: pointer; }

Veya mxmissile'nin önerdiği gibi, style = "cursor: pointer;"

— Alxandr
kaynak

4

aşağıdaki CSS ile bir sınıf oluşturun ve onclick etkinlikleriyle etiketlerinize ekleyin:

cursor:pointer;

— Dan
kaynak

3

cursor: pointerDoğru hatırlıyorsam CSS kullanın .

CSS dosyanızda:

.link_cursor
{
    cursor: pointer;
}

Ardından, bağlantı imlecine sahip olmasını istediğiniz öğelere aşağıdaki HTML'yi eklemeniz yeterlidir: class="link_cursor"(tercih edilen yöntem.)

Veya satır içi CSS kullanın:

<a style="cursor: pointer;">

— Andy Shellam
kaynak

1

Açısal versiyon:

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

— chachan
kaynak

0

Bu benim için çalıştı:

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

— BabaRick
kaynak