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


109

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

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

回答:


221

あなたが仮定しdivているid="myDiv"、あなたのCSSに以下を追加します。cursor: pointerカーソルがアンカー(ハイパーリンク)のために使用されているのと同じ手のアイコンでなければならないことを指定します。

追加するCSS

#myDiv
{
    cursor: pointer;
}

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

<div style="cursor: pointer">

</div>

編集:

これにjQueryを使用する場合は、$(document).ready()orまたはbodyに次の行を追加しますonloadmyClassすべてのdivsが共有するクラスに置き換えます)。

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

CSSではなくjqueryを使用してこれを実行したい
間違いなく

7
@guru:スクリプトを書く必要はありません。あなたがする必要があるのはstyle="cursor: pointer"あなたdivのHTMLに追加することだけです。例を挙げて回答を編集します。
Devin Burke、

ポインタ」:同じクラスで5つの部門がありますが、私はすべてこの「スタイル=」カーソルに追加することはできません
shibly

@guru、すべてのdivに同じクラスがある場合、ページのCSSファイルでそのクラスのCSSルールに「cursor:ポインタ」を実際に追加できます
攻撃

1
問題がターゲティングの問題である場合は、ジャスティンがすでに尋ねたように、そして誰もが常に尋ねなければならないように、コードを
投稿して

24

CSSの代わりにjQueryでこれを行う場合は、基本的に同じプロセスに従います。

いくつかあると仮定すると<div id="target"></div>、次のコードを使用できます:

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

それでうまくいくはずです。


3
カーソルがので、これは不要でdivあるだけマウスが上にあるときに見えます。カーソルはその時点では表示されないため、ユーザーがカーソルを合わせた後で削除する必要はありません。
Devin Burke、

2
質問は非常に狭く(DIVについて)尋ねられましたが、この回答は広く適用されます。テーブル、<p>、ボタンなど、あらゆるHTML要素に役立ちます。そのため、私は+1しました。
PeteH 2013年

10

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

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

そしてここにCSSがあります:

.special
{
    cursor: pointer;
}


0

:hover上記の回答に欠けていたと思います。したがって、以下は必要なことを行います。(cssが必要な場合)

#myDiv:hover
{
    cursor: pointer;
}

:hoverなしで私のために働いた、そしておそらく答えはたくさんの肯定的な票を持っているのでもっともっと多分 やってみましたか?
dading84 2016

はい、この回答は無視してください
being_ethereal
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.