::after 的 jQuery 悬停效果答案

【问题标题】：jQuery hover effect for ::after::after 的 jQuery 悬停效果
【发布时间】：2017-08-09 06:52:47
【问题描述】：

当我将鼠标悬停在一个 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', '');
    }
  });

【问题讨论】：

在 css 中而不是 jquery 中更好地处理它
使用js无法访问::after,::before。您应该使用 css 和转换
为什么不向父元素添加一个类然后你可以定位它：例如.hovering:hover:after
@Pete 是的，但是当该元素被悬停时，我需要一些其他效果来触发其他 div。当该操作系统悬停时，我如何告诉其他元素在 CSS 中起作用？
我会这样做的方式是在您想要添加效果的所有 div 上切换一个类，这样您就可以为悬停状态设置这些类的样式 - jsfiddle.net/otgsfh2q/1

标签： javascript jquery css pseudo-element pseudo-class

【解决方案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>

【讨论】：