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.