javascript - 临时鼠标悬停

Question

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

谢谢

Answer 1

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

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

Answer 2

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

Answer 3

我相信如果你使用 jQuery JavaScript 框架，你可以这样做：

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

Answer 4

// jQuery '临时鼠标事件'

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

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

我希望这是您需要的好方法。