如何使用jquery触发类和悬停效果

Question

是否可以使用jquery设置以下css？

类似于jquery中的.addClass（）

.macbook:not(:hover) .macbook-lid {
  -webkit-transform: rotate3d(-1, 0, 0, 91deg);
  -moz-transform: rotate3d(-1, 0, 0, 91deg);
  transform: rotate3d(-1, 0, 0, 91deg);
}
.macbook:not(:hover) .macbook-lid:before {
  width: 94%;
}

Answer 1

试试这个，

<强> CSS

.macbook:not(:hover) .macbook-lid {  }
.test{
  -webkit-transform: rotate3d(-1, 0, 0, 91deg);
  -moz-transform: rotate3d(-1, 0, 0, 91deg);
  transform: rotate3d(-1, 0, 0, 91deg);
}
.macbook:not(:hover) .macbook-lid:before {
  width: 94%;
}

<强> SCRIPT

$('.macbook').on('click',function(){
    $('.macbook-lid').toggleClass('test');
});

Tried创建Demo

Answer 2

  

是否可以使用jquery设置以下css？

是

JS：

$('.element').hover(function() {
$(this).addClass('class-below');
}, function {
$(this).removeClass('class-below');
});

CSS：

.class-below:before { .... }

您将使用此类添加以下逻辑。