title: jQuery hover effect for ::after
body: <p>I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule. </p>
  
  <p>My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.</p>
  
  <p>Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:</p>
  
  <pre><code>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() &gt; 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', '');
      }
    });
  </code></pre>