web-dev-qa-db-ja.com

マウスオーバーのマウスカーソルをアンカーのようなスタイルに変更します

マウスをdivの上に置くと、マウスカーソルがHTMLアンカーのカーソルに変わります。

これどうやってするの？ Javascriptが必要ですか、それともCSSのみで可能ですか？

javascriptcssmouse
93
shibly

divname__にid="myDiv"があると仮定して、CSSに次を追加します。 cursor: pointerは、カーソルがアンカー（ハイパーリンク）に使用される同じ手のアイコンであることを指定します。

追加するCSS

#myDiv
{
    cursor: pointer;
}

次のように、カーソルスタイルをdivname__のHTMLに追加するだけです。

<div style="cursor: pointer">

</div>

編集：

これにjQueryを使用することに決めた場合は、$(document).ready()またはbody onloadname__に次の行を追加します：（myClassname__をdivname__s共有のすべてのクラスに置き換えます）

$('.myClass').css('cursor', 'pointer');
195
Devin Burke

CSSではなくjQueryでこれを実行する場合、基本的に同じプロセスに従います。

<div id="target"></div>があると仮定すると、次のコードを使用できます。

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

そしてそれはそれを行う必要があります。

21
Ryan Atallah

実際には、jQueryは必要なく、CSSだけが必要です。たとえば、次のHTMLがあります。

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

そして、これがCSSです。

.special
{
    cursor: pointer;
}
8
attack

この意志

#myDiv
{
    cursor: pointer;
}
4
Sinetheta

上記の回答では:hoverが欠落していたと思います。そのため、以下が必要になります（CSSが必要な場合）。

#myDiv:hover
{
    cursor: pointer;
}
0
being_ethereal