css - 如何让div保持悬停状态？

Question

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

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

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

Answer 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 的情况下工作。