代码之家 › 专栏 › 技术社区 › Caio

临时鼠标指针

onmouseover javascript

3

Caio · 技术社区 · 14 年前

CSS“悬停”选择器将临时样式应用于元素,这是不确定的:

div:hover {
 background-color: red;
}

我可以用JavaScript做同样的事情,但是对于几个元素来说,这有点复杂,而且不可能:

var elem = document.getElementsByTagName ("div")[0];

elem.onmouseover = function () {
 this.style.backgroundColor = "red";
}

elem.onmouseout = function () {
 this.style.backgroundColor = "transparent";
}

有更好的方法吗?像这样:

document.getElementsByTagName ("div")[0].ontemporarymouseover = function () { // LoL
 this.style.backgroundColor = "red";
}

谢谢

4 回复 | 直到 14 年前

1

0

BrunoLM 14 年前

//jquery“临时mouseEvents”

$("element").bind
({
    mouseover:
        function ()
        {
        },
    mouseout:
        function ()
        {
        }
});

$("element").unbind('mouseover mouseout');

我希望这是一个很好的方法来满足你的需要。

2

Guffa 14 年前

不,无法应用自行消失的样式。

尽管CSS只包含一个定义,但它实际上对应于触发的两个状态更改 onmouseover 和 onmouseout . 当指针进入元素时, :hover 添加了伪类,使CSS规则适用。当指针离开元素时, 悬停 删除了伪类,使CSS规则不再适用。

3

1

Daniel Vassallo 14 年前

在JavaScript中,只能通过监听 mouseover 和 mouseout DOM events ,正如在第二个示例中所做的那样。但是,建议使用CSS处理悬停样式,如第一个示例中所示。

4

0

james_womack 14 年前

我相信如果您使用jquery javascript框架,您可以这样做:

$('div:first').hover(function(){
   $(this).css('background-color','red');
},function(){
   $(this).css('background-color','white');
});