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

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

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

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

---

编辑：Javascript也不错，如果可能的话，最好是跨平台解决方案

您应该执行以下操作：

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

测试部门。。。

---

这是测试它的最佳方法。

对于纯CSS解决方案，您需要使用transition

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;
}

---

它会立即变为红色，但需要

9999999 s

才能变为白色，这太多了（你可以增加它），我肯定有人不会在几个小时或几天内打开一个页面……

CSS解决方案不会在所有浏览器中都起作用，所以你应该使用JavaScript。最好不要使用DOMLevel0事件，正如另一个答案所建议的那样，最佳做法是向div中添加一个CSS可以设置样式的类。您可以使用jQuery并执行以下操作：

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

然后设计它：

#myDiv.active {
    background: red;
}

---

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

javascript需要这样的更改-这是一个选项吗？是的，编辑了原始帖子。“CSS解决方案无法在所有浏览器中工作，所以你应该使用javascript”-这是一个愚蠢的规则。它可能适用于您关心的所有浏览器。突出显示一个

只能被认为是“功能性的”（这取决于OP来决定是否是），而且只要它是令人眼花缭乱的，我认为没有理由不让旧浏览器降级为没有它。我支持我们应该开发一种适用于所有浏览器的东西的想法，但直到什么时候我们才会因为IE6而残疾？IE6或7仅在Windows XP上可用，即使microsoft已停止或将停止支持IE6，我们是否总是要问自己IE6是否有效？即使是主要网站（Facebook、谷歌）也几乎无法在IE6上运行。（我仍在使用Windows xp:P）我认为很难证明支持IE9过于激进。你的方法看起来很棒，但不管出于什么原因，我都无法让它工作。我的jQuery库应该很好。编辑：在jsFiddle（）上也不起作用，或者我只是做错了什么。对不起！事件应该是“mouseenter”，而不是“hover”。很好的破解，尽管我感觉供应商在代码示例中添加了前缀属性。就我个人而言，我会将它们排除在外，并依靠阅读者充分了解CSS的当前状态来处理它们。但请记住，转换只适用于某些现代浏览器。用户正在寻找“全浏览器”解决方案吗？@blachawk看到OP没有表达这样的约束，这个答案仍然完全有效。最近我对Javascipt感到厌倦，因为我知道如果禁用Javascript，一切都将无法正常工作，这让我发疯，所以我倾向于将CSS用于视觉内容，并尽可能少地使用Javascript。CSS3太棒了@AliBassam完全公平地说，排除坚持使用传统浏览器的用户与排除坚持禁用JS的用户一样公平。（这一点对于eyecandy特性尤其没有意义。）好吧，我该如何从CSS文件加载样式呢？