javascript - 是否可以通过悬停而不是单击来激活 DIV？

Question

所以，这里有一个例子:我们有 50x50 像素大小的 DIV，它有黑色边框和白色背景。当您将鼠标悬停在 div 上时，它会将背景颜色更改为红色。

现在的问题是:当您在 DIV 上悬停一次时，如何使它的背景色保持红色，即使您将鼠标移开？

换句话说，如何通过悬停而不是单击来激活 DIV？

编辑:Javascript 也很好，如果可能，跨平台解决方案将是首选。

Answer 1

CSS 解决方案并非适用于所有浏览器，因此您应该使用 JavaScript。最好不要像其他答案建议的那样使用 DOM 级别 0 事件来执行此操作，最佳做法是向您的 div 添加一个 CSS 可以设置样式的类。您可以使用 jQuery 并执行以下操作:

$(function(){    
    $('#myDiv').on('mouseenter', function(){
        $(this).addClass('active');
    });
});

然后设置样式:

#myDiv.active {
    background: red;
}

这样可以将页面的结构、样式和功能分开，使以后的维护更加容易。它还可以轻松地将相同的功能添加到页面上的其他元素。