0

jQuery を使用してクリック可能なリンクを作成します。

ここでjsFiddle

ターゲットを入力すると<span id="login">、カーソルが手の形に変わり、テキストに下線が引かれます。を離れると<span>、pointer/no_underline に戻る必要があります。

ただし、最初に を入力する<span>と、カーソルは I ビーム (テキストに下線が引かれます) に変わり、 を離れるとポインター (下線なし) に戻ります<span>。これは望ましくない動作です。ただし、最初に出入りすると、<span>すべてが正常に機能します。

最初の入力時にカーソルが最初に手ではなく I ビームに変わるのを防ぐにはどうすればよいですか?

HTML

<span id="login">login</span>

Jクエリ:

$(document).ready(function() {
    $('#login').mouseenter(function() {
            $(this).css({'text-decoration':'underline','cursor':'hand'});
        }).mouseleave(function() {
            $(this).css({'text-decoration':'none','cursor':'pointer'});
        }
    );
}); //END document.ready()
4

2 に答える 2

3

これを行うのに JavaScript は必要ありません。CSS で次のようなことができるはずです。

#login {
    cursor: pointer;
}
#login:hover {
    text-decoration: underline;
}

CSSプロパティは、マウスが要素の上にあるときにcursor使用する必要があるマウス カーソルを定義します。そのため、いつでも設定でき、マウスが入ったり離れたりするときに追加/削除する必要はありません。(ちなみに、ポインターと指のカーソルは「ポインター」と呼ばれ、標準の矢印は単に「デフォルト」と呼ばれます)

下線については:hover、マウスが要素の上にある場合にのみ、セレクターを使用してスタイルを適用できます。(:hoverセレクターは、時々想定されるように、リンクでのみ使用できるわけではありません)

JavaScript でこれを行おうとすると、非常に非効率的であり、将来的に問題が発生するだけです。これは、ブラウザがすでに完全にサポートしている標準のスタイルです。

于 2013-06-21T03:47:48.843 に答える
2

「hand」と「pointer」ではなく、「pointer」と「default」のCSS カーソルを使用します (「hand」はありません)。

$('#login').mouseenter(function () {
    $(this).css({
        'text-decoration': 'underline',
        'cursor': 'pointer'
    });
}).mouseleave(function () {
    $(this).css({
        'text-decoration': 'none',
        'cursor': 'default'
    });
});

jsFiddle の例

于 2013-06-21T03:47:34.103 に答える