如何将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。