Fare tablodaki bir satırın üzerine geldiğinde imleci el ile değiştirme

202

Benim fare üzerinde gittiğinde ben el imleci işaretçisi nasıl değiştiririm <tr>a'da<table>

<table class="sortable" border-style:>
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

html css cursor

— Zeeshan Rang
kaynak

Etkileşimli kod pasajı için cevabımı kontrol et

— fmagno

352

Bunu aslında CSS ile yapabilirsiniz.

.sortable tr {
    cursor: pointer;
}

— dangerChihuahua007
kaynak

21

Bu olmadan gayet iyi çalışacaktır :hover. cursorfarenizin üzerine geldiğinde imlecin neye değişeceğini tanımlar.

— James Montagne

3

Gereksiz olanı kaldırmak için bu cevabı değiştirme şansınız var :hovermı? Soru 2 yıl sonra hala dikkat çekiyor ve kabul edilen cevabın :hovergereksiz yere kullanılmasını önermemesi hoş olurdu . Sanırım nasıl cursorçalıştığının yanlış anlaşılmasına yol açıyor :hoverve imleci değiştirmek için gerekli olduğunu ima ediyor .

— James Montagne

202

Bootstrap stillerini biraz araştırdım ve bunu buldum:

[role=button]{cursor:pointer}

Bu yüzden ne istediğinizi alabilirsiniz varsayalım:

<span role="button">hi</span>

— Ivan
kaynak

Bootstrap meraklıları için güzeldi, ancak soru herhangi bir ön çerçeve içermiyor, bu yüzden bu cevabın neden soru ile alakalı olduğunu anlamıyorum (cevap harika olsa bile)

— Greco Jonathan

@Hooli 6-2018 itibariyle bu yazı artık "fareyle üzerine gelindiğinde işaretçi için bootstrap değiştirme simgesi" aramasında en iyi sonuçtur.

— BrianHVB

1

@ OlivierBoissé Sadece test edildi ve kesinlikle BS 4 ile çalışıyor

— Gabe Hiemstra

2

Önemli: Eklemek role="button"istediğinizde eklemeyin style="cursor:pointer;". Öncelikle, öğeniz CSS'nin başka bir yerde tanımlanmasına (ve başka bir yerde geçersiz kılınmamasına) bağlıdır ve en önemlisi, çoğu kullanıcının buna ihtiyacı olmadığı için roleözelliği kötüye kullanıyorsunuz . Çoğu ekran okuyucunun, [role=button]web erişilebilirliğine meydan okuyan kullanıcılara tüm sayfa düğmelerinden hızlı bir şekilde geçme olanağı veren öğelerin yinelenmesine izin verdiğini unutmayın . Altbilgi bağlantılarına ulaşmak için tablonun satırlarının her birini geçmek zorunda kalmayın!

— tao

75

Bulduğum en kolay yol

style="cursor: pointer;"

etiketlerinize ekleyin.

— Ira Herman
kaynak

23

cursor: pointerCss'nize ekleyin .

— James Montagne
kaynak

17

İmleç seçeneklerini yönetmek için bunu style.css dosyasına ekledim:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}

— xackobo
kaynak

1

Yol boyunca yazım hataları getirirseniz iyi değil (bkz. "croshair")

— gözlemci

12

IE <6 ile uyumluluk için bu stili şu sırayla kullanın:

.sortable:hover {
    cursor: pointer;
    cursor: hand;
}

Ancak, IE <7'nin :hoveryalnızca <a>öğe ile psödoklassı desteklediğini unutmayın .

— Ubique
kaynak

10

cursor: pointer;İmlecin değişmesini istediğiniz öğenin CSS'sindeki stili kullanın .

Sizin durumunuzda (.css dosyanızda) şunu kullanırsınız:

.sortable {
    cursor: pointer;
}

— Çetan
kaynak

9

CSS imleç özelliğini şu şekilde kullanın :

<table class="sortable">
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

Elbette stili CSS dosyanıza koymalı ve sınıfa uygulamalısınız.

— everpresent
kaynak

4

Css kullanma

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/

— Alfa
kaynak

3

sadece standart bir çözüm için yukarıdaki çözümler çalışır, ancak datatables kullanıyorsanız, varsayılan datatatables.css ayarlarını geçersiz kılmanız ve özel css'e aşağıdaki kodu eklemeniz gerekir. html'de gösterildiği gibi.

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

Ve html aşağıdaki gibi görünecektir:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>

— Renu
kaynak

Yukarıdaki çözüm nedir?

— Kmeixner

2

Satır içi stillere sahip örnek:

<table>
  <tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
  <tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
  <tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>

Snippet'i genişlet

— fmagno
kaynak