Question

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

现在的问题是：当你在DIV上徘徊一次时，即使你将鼠标移开，你怎么能让它的背景颜色保持红色？

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

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

Answer 1

你应该这样做：

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

这是测试它的jsfiddle。

Answer 2

对于Pure 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事件来执行此操作，因为其他答案表明，最佳做法是在CSS中添加一个CSS可以设置样式的类。您可以使用jQuery并执行以下操作：

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

然后设计它：

#myDiv.active {
    background: red;
}

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

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

3 个答案: