0

使用 jQuery 创建可点击的链接。

jsFiddle在这里

输入目标<span id="login">时，光标应变为手形，文本带有下划线。离开时<span>，应恢复为指针/无下划线。

但是，在第一次 enter<span>时，光标变为 I-Beam（带下划线的文本），并在离开时恢复为指针（无下划线）<span>。这不是期望的行为。但是，在第一次之后，当进入/离开时，<span>一切都会正常运行。

如何防止光标在第一次进入时最初变为 I-Beam 而不是手？

HTML

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

查询：

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

你想使用'pointer'和'default'的CSS光标，而不是'hand'和'pointer'（没有'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 回答