jQuery懸停效果::

當我將鼠標懸停在div上時發射了幾個效果。問題是div也有僞元素:: after，它使用內容CSS規則用虛擬元素（播放按鈕）填充div。jQuery懸停效果::

當我懸停除了:: after元素所在空間以外的div的任何部分時，我的懸停效果就起作用。

簡單地說，我想知道是否有方法使用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', ''); 
    } 
    });

來源

2017-03-17 Austin Branham

更好地處理它在CSS沒有jQuery的 – user7417866

您不能訪問::後，使用:: JS之前。你應該使用CSS和變換 –

爲什麼不向父元素添加一個類，那麼你可以定位：例如'.hovering：hover：after' – Pete

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

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

.example { 
 
\t height:10px; 
 
\t width:100px; 
 
\t background:green; 
 
\t margin:20px 0 20px 0; 
 
} 
 

 
.example:after { 
 
\t content:''; 
 
\t background:red; 
 
\t height:10px; 
 
\t width:100%; 
 
    display: block; 
 
\t position:relative; 
 
\t 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>

來源

2017-03-17 16:27:29 Neil

jQuery懸停效果::

回答

相關問題