zmień kursor na wskaźnik palca


234

Mam to ai nie wiem, że muszę wstawić do „onmouseover”, aby kursor zmienił się w wskaźnik palca jak zwykły link:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

Przeczytałem gdzieś, co muszę umieścić:

onmouseover="cursor: hand (a pointing hand)"

Ale to nie działa dla mnie.

Ponadto nie jestem pewien, czy jest to uważane za JavaScript, CSS, czy zwykły HTML.


to css, a zdarzenie onmouseover jest zdarzeniem javascript.
Scott,

Nie umieszczasz css bezpośrednio w onmouseover = "". Kursor: ręka podczas najechania kursorem na link powinna być domyślną akcją. Jeśli tak się nie dzieje, może być inny problem.
Tank



3
lol „Ręka ... ręka wskazująca!” haha przepraszam, nie mogłem się oprzeć.
Christine,

Odpowiedzi:


458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

To jest css.

Lub w arkuszu stylów:

a.menu_links { cursor: pointer; }

2
Po przetestowaniu tego wydaje się, że konieczne jest posiadanie zarówno onmouseover = "" AND style = kursor: wskaźnik; ". Jeśli masz tylko znacznik stylu, kursor wskaźnika kursora zniknie / będzie domyślnie ustawiony na standardowy wskaźnik po interakcji jednym kliknięciem. Dobry post Scott, dziękuję
Nubtacular

1
@DnfD potrzebujesz tylko, onmouseoverjeśli nie ma href definicji. Jeśli, tak jak standardowy kotwicy, nie jesthref definicji, onmouseovernie jest konieczne.
Scott

@DnfD zaakceptowana odpowiedź jest naprawdę okropna. wykonuje pracę, ale nie jest jasne. usuń mouseover=""i style="cursor: pointer;"pozostaw class="menu_links" to zadziała! niezależnie od tego, czy hreftam jest, czy nie.
Jarett Lloyd,

@ Scott nie, nie potrzebujesz tam mouseoverwydarzenia. patrz mój poprzedni komentarz do DnfD
Jarett Lloyd

@JarettLloyd wiele zależy od obsługi przeglądarki i budowy CSS. To jest odpowiedź z 2012 roku . Rzeczy zmieniły się przez ponad 6 lat.
Scott,

52

Możesz to zrobić w CSS:

a.menu_links {
    cursor: pointer;
}

Jest to w rzeczywistości domyślne zachowanie linków. Musisz go w jakiś sposób przesłonić w innym miejscu w CSS, lub nie ma tam żadnego hrefatrybutu (brakuje go w twoim przykładzie).


nie mam href bo nie chcę opuszczać strony. jest to link, który uruchamia funkcję JS, a jeśli wstawię href = "#", to popsunie ją i przeładuje niewłaściwą stronę
Dvir Levy

2
@DvirLevy - Więc zwróć false i użyj href="#"lub po prostu użyj CSS, jak ci pokazałem ...
Joseph Silber

22

Lubię używać tego, jeśli mam tylko jeden link na stronie:

onMouseOver="this.style.cursor='pointer'"


7

Oto coś fajnego, jeśli chcesz zrobić z tego jeszcze więcej. w adresie URL możesz użyć linku lub zapisać obraz png i użyć ścieżki. na przykład:

url („asset / imgs / theGoods.png”);

poniżej znajduje się kod:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Będzie to działało tylko w rozmiarze 128 X 128, większym i obraz nie będzie ładowany. Ale możesz praktycznie użyć dowolnego obrazu! Można to uznać za czysty css3 i trochę html. wszystko co musisz zrobić w HTML to

<div class='cursor'></div>

i tylko w tym divu kursor się pokaże. Zwykle więc dodaję go do tagu body.


6

Myślę, że powyższa „najlepsza odpowiedź”, choć dokładna programowo, w rzeczywistości nie odpowiada na postawione pytanie. pytanie dotyczy sposobu zmiany wskaźnika w przypadku najechania kursorem myszy. Widzę posty o tym, że gdzieś błąd może nie odpowiadać na pytanie. W zaakceptowanej odpowiedzi zdarzenie najechania myszą jest puste ( onmouseover=""), a zamiast tego uwzględniona jest opcja stylu. Zaskakujące, dlaczego tak się stało.

Link do pytającego może nie być niczym złym. rozważ następujący HTML:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Kiedy mysz użytkownika znajdzie się nad tym linkiem, wskaźnik nie zmieni się w dłoń ... zamiast tego wskaźnik będzie się zachowywał tak, jakby unosił się nad zwykłym tekstem. Ktoś może tego nie chcieć ... dlatego wskaźnik myszy wymaga zmiany.

poszukiwana odpowiedź jest następująca (która została zamieszczona przez inną osobę):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

Jest to jednak ... koszmar, jeśli masz ich dużo lub używasz tego rodzaju rzeczy w dowolnym miejscu i postanawiasz coś zmienić lub wpaść w błąd. lepiej zrobić dla niego klasę CSS:

a.lendhand {
  cursor: pointer;
}

następnie:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

istnieje wiele innych sposobów, które byłyby prawdopodobnie lepsze niż ta metoda. DIV , BUTTON , IMG itp. Mogą okazać się bardziej przydatne. <a>...</a>Jednak nie widzę żadnej szkody w korzystaniu .

jarett.


4

Dodaj hrefatrybut, aby uczynić go prawidłowym łączem i return false;w module obsługi zdarzeń, aby uniemożliwić nawigację;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Lub spraw, aby displayData()return false i ..="return displayData(..)


3

Rozwiązanie za pomocą czystego CSS, jak wspomniano w odpowiedzi oznaczonej jako najlepsze, nie jest odpowiednie dla tej sytuacji.

Przykład w tym temacie nie ma normalnego statycznego atrybutu href, wywołuje tylko JS, więc nie zrobi nic bez JS.

Warto więc włączać wskaźnik tylko w JS. Więc rozwiązanie

onMouseOver="this.style.cursor='pointer'"

jak wspomniano powyżej (ale nie mogę tego skomentować) jest najlepszy w tym przypadku. (Ale tak, ogólnie rzecz biorąc, w przypadku zwykłych łączy niewymagających JS lepiej jest pracować z czystym CSS bez JS.)


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.