如何让 div 保持悬停状态？答案

【问题标题】：How to keep divs in a hovered state?如何让 div 保持悬停状态？
【发布时间】：2014-04-21 23:47:22
【问题描述】：

我如何才能让我的divs 在最初悬停后永久保持悬停状态？

理想情况下，我需要一些可以与现有代码一起使用的东西（如果可能的话），因为有很多实例：

#cover:hover img{
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
}

【问题讨论】：

【解决方案1】：

如果您要求将鼠标悬停在某个元素上，并在光标离开该元素后继续显示该元素，则无法在 CSS 中完成。必须使用 Javascript 来完成。

我会为图像悬停之后和之前的状态创建一个类，就像这样。

 .hover-to-change {
     opacity: 0.0;
      -webkit-transition: all 0.2s ease-in-out;
 }
 .hovered {
     opacity: 1.0;
 }

然后添加一些jQuery来改变图像悬停时的类。

 $(document).ready(function() {
     $(".hover-to-change").mouseenter(function() {
         $(this).addClass('hovered');
     )};
 });

这应该可行。

因为 CSS 只是标记，它实际上不会改变 HTML 或 CSS 的状态，除非它立即在页面中指定。但是-webkit-transition 应该可以在没有任何额外 jQuery 的情况下工作。

【讨论】：

请使用$(this)和.addClass()方法，顺便说一句，你只需要mouseenter事件，不需要使用.hover()，$('document')应该是$(document)....