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 { .... }

このクラスを使用して、以下のロジックを追加します。