CODEWITHSUNDEEP
jquery
cssyphus
cssyphus

Reputation: 40076

jquery mouseenter - cursor ignores css instruction

Using jQuery to create a clickable link.

jsFiddle here

When enter the target <span id="login">, cursor should change to a hand and text be underlined. When leave the <span>, should revert back to pointer/no_underline.

However, upon first enter <span>, the cursor changes to an I-Beam (text underlined), and reverts to pointer (no underline) upon leaving <span>. This is not desired behavior. After the first time, though, when enter/leave <span> everything works like it should.

How can I prevent the cursor from initially changing to an I-Beam and not a hand upon first entry?

HTML

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

JQUERY:

$(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()

Upvotes: 0

Views: 320

Answers (2)

jcsanyi
jcsanyi

Reputation: 8174

You don't need javascript to do this. You should be able to do something like this in CSS:

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

The CSS cursor property defines the mouse cursor that should be used when the mouse is over the element - so it can be set at all times, it doesn't have to be added/removed when the mouse enters or leaves. (Incidentally, the pointer-finger cursor is called "pointer", and the standard arrow is just called 'default')

For the underlining, you can use the :hover selector to apply a style only when the mouse is over the element. (The :hover selector is not, as is sometimes assumed, only available on links)

Trying to do this with javascript is very inefficient, and will only lead to problems down the road. This is standard styling that the browser already fully supports.

Upvotes: 3

j08691
j08691

Reputation: 207923

You want to use the CSS cursors of 'pointer' and 'default', not 'hand' and 'pointer' (there is no 'hand').

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

jsFiddle example

Upvotes: 2

Related Questions