Fare imlecini farenin üzerine getirerek bağlantı stiline değiştirin


110

Fareyi bir divfare imlecinin üzerine getirirsem , HTML çapasında olduğu gibi imleç olarak değişecektir.

Bunu nasıl yapabilirim? Javascript'e ihtiyacım var mı yoksa sadece CSS ile mümkün mü?

Yanıtlar:


222

Senin varsayarsak divbir vardır id="myDiv", sizin CSS aşağıdakileri ekleyin. cursor: pointerİmleç çapalar (köprüler) için kullanılmasıdır aynı el simgesi olması gerektiğini belirtir:

Eklenecek CSS

#myDiv
{
    cursor: pointer;
}

İmleç stilini kendi divHTML kodunuza şu şekilde ekleyebilirsiniz :

<div style="cursor: pointer">

</div>

DÜZENLE:

Bunun için jQuery kullanmaya kararlıysanız, aşağıdaki satırı sizin $(document).ready()veya bedeninize ekleyin onload: ( myClasstümünün divpaylaştığı sınıfla değiştirin )

$('.myClass').css('cursor', 'pointer');

Bunu jquery ile yapmak istiyorum css değil
shably

7
@guru: Komut dosyası yazmaya gerek yok. Tek yapmanız gereken style="cursor: pointer"kendi divHTML kodunuza eklemek . Cevabımı bir örnekle düzenleyeceğim.
Devin Burke

İşaretçi": Aynı sınıfı ile beş bölünme i tüm bu "style =" imleç ekleyemezsiniz vardır
shibly

@guru, eğer tüm div'ler aynı sınıfa sahipse, o zaman sayfanızın CSS dosyasında o sınıf için CSS kuralına aslında "imleç: işaretçi" ekleyebilirsiniz
saldırın

1
sorun hedeflemeyle ilgili ise, o zaman Justin'in zaten sorduğu gibi ve herkesin her zaman sorması gerektiği gibi, eklemenize yardımcı olabilmemiz için KODU
YAYIN

24

Bunu CSS yerine jQuery'de yapmak istiyorsanız, temelde aynı süreci takip edersiniz.

Bazılarına sahip olduğunuzu varsayarsak <div id="target"></div>, aşağıdaki kodu kullanabilirsiniz:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

ve bunu yapmalı.


3
Bir için imleci çünkü bu gereksiz olduğunu divise sadece fare üzerine geldiğinde görünür. İmleç o anda zaten görünmeyeceğinden, kullanıcı fareyle üzerine geldiğinde onu kaldırmak için bir neden yoktur.
Devin Burke

2
Soru çok dar bir şekilde sorulduğu halde (DIV'ler hakkında) bu cevap genel olarak geçerlidir. Tablolar, <p> 'ler, düğmeler vb. Gibi herhangi bir HTML öğesi için kullanışlıdır. Bu yüzden onu + 1'ledim.
PeteH

10

Aslında jQuery'ye ihtiyacınız yok, sadece CSS. Örneğin, işte bazı HTML'ler:

<div class="special"></div>

Ve işte CSS:

.special
{
    cursor: pointer;
}


0

Sanırım :hoveryukarıdaki cevaplarda eksikti. Yani aşağıdaki gerekli olanı yapar. (Css gerekli olsaydı)

#myDiv:hover
{
    cursor: pointer;
}

Benim için: vurgulu olmadan çalıştı ve muhtemelen yanıtın çok sayıda olumlu oyu olduğu için çok daha fazlası. Onu denedin mi?
dading84
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.