当我将鼠标悬停在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', '');
}
});
答案 0 :(得分:0)
如果您只是将新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>