Mude o cursor do mouse para o estilo âncora


109

Se eu passar o mouse sobre a, divo cursor do mouse será alterado para o cursor como o da âncora HTML.

Como posso fazer isso? Eu preciso de Javascript ou só é possível com CSS?

Respostas:


221

Supondo que você divtenha um id="myDiv", adicione o seguinte ao seu CSS. O cursor: pointerespecifica que o cursor deve ser o mesmo ícone de mão usado para âncoras (hiperlinks):

CSS para adicionar

#myDiv
{
    cursor: pointer;
}

Você pode simplesmente adicionar o estilo do cursor ao seu divHTML da seguinte maneira:

<div style="cursor: pointer">

</div>

EDITAR:

Se você está determinado a usar jQuery para isso, adicione a seguinte linha ao seu $(document).ready()corpo ou onload: (substitua myClasspor qualquer classe todas as suas divações)

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

Eu quero fazer isso com jquery, não css
provavelmente

7
@guru: Não há necessidade de scripts. Tudo que você precisa fazer é adicionar style="cursor: pointer"ao seu divHTML. Vou editar minha resposta com um exemplo.
Devin Burke

Existem cinco divisões com a mesma classe, eu não posso adicionar a tudo isso "style =" cursor: ponteiro "
provavelmente

@guru, se todos os divs tiverem a mesma classe, então você pode adicionar "cursor: ponteiro" à regra CSS para essa classe no arquivo CSS da sua página
ataque em

1
se o problema for de segmentação, então, como Justin já perguntou, e como todo mundo sempre pergunta, POSTE O CÓDIGO para que possamos ajudá-lo a anexá-lo
Sinetheta

24

Se você quiser fazer isso em jQuery em vez de CSS, basicamente siga o mesmo processo.

Supondo que você tenha algum <div id="target"></div>, você pode usar o seguinte código:

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

e isso deveria bastar.


3
Isso é supérfluo porque o cursor de a div fica visível quando o mouse está sobre ele. Não há razão para removê-lo depois que o usuário sai do lugar, porque o cursor não seria visto naquele momento.
Devin Burke

2
Embora a pergunta tenha sido feita de forma muito restrita (sobre DIVs), esta resposta se aplica de forma ampla. É útil para qualquer elemento HTML, como tabelas, <p>'s, botões, etc. É por isso que eu marquei com +1.
PeteH de

10

Na verdade, você não precisa do jQuery, apenas CSS. Por exemplo, aqui está algum HTML:

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

E aqui está o CSS:

.special
{
    cursor: pointer;
}


0

Acho que :hoverestava faltando nas respostas acima. Então, seguir seria o necessário. (Se o css fosse necessário)

#myDiv:hover
{
    cursor: pointer;
}

Funcionou para mim sem o: hover e, provavelmente, muitos mais, pois a resposta tem muitos votos positivos. Você experimentou?
dading84 de

sim, ignore esta resposta
being_ethereal
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.