::after 的 jQuery 悬停效果 [英] jQuery hover effect for ::after

问题描述

当我将鼠标悬停在 div 上时，我会触发多种效果.问题是 div 也有伪元素 ::after，它使用内容 CSS 规则用虚拟元素(播放按钮)填充 div.

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.

当我悬停 div 的任何部分而不是 ::after 元素所在的空间时，我的悬停效果会起作用.

My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.

简单地说，我想知道是否有办法使用 jQuery 指向 ::after 元素.我试图将 ::after 元素定义为一个名为play"的变量，但也没有运气.这是我的脚本:

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:

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', '');
    }
  });

推荐答案

如果您只是将新 CSS 添加到样式中，然后在我们完成悬停后将其删除会怎样?效果很好:

What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:

$(".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>

这篇关于::after 的 jQuery 悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！