模擬在懸停事件上執行的按鈕上的閃耀效果，但與其他事件

Question

這是我的第一個問題

我無法找到答案。 我一直在尋找各種話題，像這樣的人（例如）：

• How to force a hover state with jQuery?
• How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?

我想模擬上懸停觸發按鈕閃耀效果（效果只是CSS，我把它從這個網站：https://codemyui.com/pure-css-shining-button-hover-animation/），但與其他事件，如點擊其他按鈕或任何。 根據我以前的主題研究，是不可能觸發懸停事件，所以解決方法是分配一個類懸停CSS樣式， 這就是我試圖做的，但我不能讓它的工作。

我認爲這個問題是因爲它具有僞元素，例如的CSS：後，：和前：懸停，有時他們結合。

下面是代碼：

CSS：

@import url(https://fonts.googleapis.com/css?family=Raleway:300); 
.btnShine { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
      transform: translateX(-50%) translateY(-50%); 
} 

.btnShine { 
    background: #333; 
    color: #ccc; 
    width: 200px; 
    height: 60px; 
    border: 0; 
    font-size: 18px; 
    border-radius: 4px; 
    font-family: 'Raleway', sans-serif; 
    -webkit-transition: .6s; 
    transition: .6s; 
    overflow: hidden; 
} 
.btnShine:focus { 
    outline: 0; 
} 
.test1, .btnShine:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.5); 
    width: 60px; 
    height: 100%; 
    left: 0; 
    top: 0; 
    opacity: .5; 
    -webkit-filter: blur(30px); 
      filter: blur(30px); 
    -webkit-transform: translateX(-100px) skewX(-15deg); 
      transform: translateX(-100px) skewX(-15deg); 
} 
.test2, .btnShine:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.2); 
    width: 30px; 
    height: 100%; 
    left: 30px; 
    top: 0; 
    opacity: 0; 
    -webkit-filter: blur(5px); 
      filter: blur(5px); 
    -webkit-transform: translateX(-100px) skewX(-15deg); 
      transform: translateX(-100px) skewX(-15deg); 
} 
.test4, .btnShine:hover { 
    background: #338033; 
    cursor: pointer; 
} 
.test3, .btnShine:hover:before { 
    -webkit-transform: translateX(300px) skewX(-15deg); 
      transform: translateX(300px) skewX(-15deg); 
    opacity: 0.6; 
    -webkit-transition: .7s; 
    transition: .7s; 
} 
.test5, .btnShine:hover:after { 
    -webkit-transform: translateX(300px) skewX(-15deg); 
      transform: translateX(300px) skewX(-15deg); 
    opacity: 1; 
    -webkit-transition: .7s; 
    transition: .7s; 
} 

HTML：

<button id="btn">Simulate a hover on the Stylized button</button> 
<!--this shine effect was taken from this url https://codemyui.com/pure-css-shining-button-hover-animation/--> 
<button class="btnShine">hover</button> 

JS/JQuery的：

$("#btn").on("click", function(){ 
    //$(".btnShine").trigger("mouseenter"); 
    //$(".btnShine").trigger("hover"); 
    //$(".btnShine").trigger("mouseover"); 
    //$(".btnShine").mouseover(); 
    $('.btnShine').addClass("test3"); 
    $('.btnShine').addClass("test4"); 
    $('.btnShine').addClass("test5"); 
/* 
    $('.btnShine').removeClass("test5"); 
    $('.btnShine').removeClass("test4"); 
    $('.btnShine').removeClass("test3"); 
    */ 
}); 

我做這個的jsfiddle，所以你們可以理解我想要的做。

https://jsfiddle.net/kaedfegn/2/

PS：我是智利的，所以我的母語是西班牙語。

Answer 1

您忘了將:before和:after添加到您的所有測試課程中。

所以，這樣的：

.test1, .btnShine:before

應該是這樣的：

.test1:before, .btnShine:before

見updated fiddle

我會考慮將所有的 「測試」 類爲一類並圍繞這一類寫作風格。我將他們全部合併在this fiddle中稱爲.shine。

所以選擇會是這個樣子：

.btnShine.shine, .btnShine:hover { 
    background: #338033; 
    cursor: pointer; 
} 

.btnShine.shine:before, .btnShine:hover:before { 
    -webkit-transform: translateX(300px) skewX(-15deg); 
      transform: translateX(300px) skewX(-15deg); 
    opacity: 0.6; 
    -webkit-transition: .7s; 
    transition: .7s; 
} 

.btnShine.shine:after, .btnShine:hover:after { 
    -webkit-transform: translateX(300px) skewX(-15deg); 
      transform: translateX(300px) skewX(-15deg); 
    opacity: 1; 
    -webkit-transition: .7s; 
    transition: .7s; 
}