临时Onmouseover

Question

Css "hover“选择器将临时样式应用于元素，但它不是确定的：

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";
}

谢谢

Answer 1

// jQuery‘临时鼠标事件’

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

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

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

Answer 2

不，没有办法应用自动消失的样式。

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

Answer 3

在JavaScript中，这种行为只能通过侦听mouseover和mouseout DOM events来处理，就像您在第二个示例中所做的那样。但是，建议使用CSS处理悬停样式，如您的第一个示例所示。