暂时鼠标悬停

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 'Temporary mouseevents'

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

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

我希望这是满足您需求的好方法。

Answer 4

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

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