jquery - 如何使用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%;
}

脚本

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

Tried创建演示

Answer 2

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

是的。

JS：

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

CSS：

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

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