jQuery懸停效果為:: after

Question

當我將鼠標懸停在div上時，我會發出幾種效果。 問題是div還有偽元素:: after，它使用內容CSS規則用虛擬元素（播放按鈕）填充div。

當我懸停div的任何部分而不是:: after元素所在的空間時，我的懸停效果會起作用。

簡單地說，我想知道是否有一種方法可以使用jQuery指向:: after元素。 我試圖將:: after元素定義為名為“play”的變量，但也沒有運氣。 這是我的腳本：

var play = $('a.image-wrap::after');

$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
      $('.image-holder').css('background-color', color);
      $('.image-holder img').css({
        'mix-blend-mode': 'multiply',
        opacity: .6
      });
      if ($(window).width() > 1115) {
        $('.read').css('right', '35%');
      } else {
        $('.read').css('right', '0');
      }
    },
    mouseleave: function () {
      $('.image-holder').css('background-color', '');
      $('.image-holder img').css({
        'mix-blend-mode': '',
        opacity: ''
      });
      $('.read').css('right', '');
    }
  });

Answer 1

如果您只是將新CSS添加到樣式中然后在我們完成懸停時將其刪除，該怎么辦？ 它工作得很好：

 $(".example").on("mouseenter", function () { $("#workAround").html(".example:after {background:pink}"); }).on("mouseleave", function () { $("#workAround").html(""); }); 

 .example { height:10px; width:100px; background:green; margin:20px 0 20px 0; } .example:after { content:''; background:red; height:10px; width:100%; display: block; position:relative; bottom:-10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style id="workAround"></style> <div class="example"></div>