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

Question

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

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

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

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

Answer 1

你应该像下面这样：

   <div id="content" onmouseover="this.style.backgroundColor='red';"  > Testing div ... </div>

这是测试它的jsfiddle 。

Answer 2

对于纯 CSS 解决方案，您需要使用过渡。

div
{
     background:white;
     -webkit-transition:background 0s;
     -webkit-transition-delay:999999s;
     -moz-transition:background 0s;
     -moz-transition-delay:999999s;
     transition:background 0s;
     transition-delay:999999s;
}
div:hover
{
     background:red;
     -webkit-transition-delay:0s;
     -moz-transition-delay:0s;
     transition-delay:0s;
}

它会立即变成红色0s，但会999999s变成白色，这太多了（你可以增加它），我敢肯定有人不会让页面保持打开数小时或数天......

Answer 3

CSS 解决方案不适用于所有浏览器，因此您应该使用 JavaScript。正如另一个答案所暗示的那样，最好不要使用 DOM Level 0 事件来执行此操作，最佳做法是向您的 div 添加一个您的 CSS 可以设置样式的类。您可以使用 jQuery 并执行以下操作：

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

然后样式它：

#myDiv.active {
    background: red;
}

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