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

不，没有办法应用自己消失的风格。

虽然CSS只包含一个定义，但它实际上对应于触发onmouseover和onmouseout的两个状态更改。当指针进入元素时，会向其添加:hover伪类，使CSS规则适用。当指针离开元素时，:hover伪类被删除，导致CSS规则不再适用。

Answer 2

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

Answer 3

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

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

Answer 4

// jQuery'Temporary mouseevents'

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

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

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

临时Onmouseover

4 个答案: