javascript - Simulate a shine effect on a button that is executed on hover event, but with other event -

this first question

i can't find answer. have been looking on various topics, ones (for example):

• how force hover state jquery?
• how simulate mouseover in pure javascript activates css ":hover"?

i want simulate shining effect on button triggers on hover (the effect css , took site: https://codemyui.com/pure-css-shining-button-hover-animation/), other event, clicking other button or whatever. according previous topics research, not possible trigger hover event, workaround assign class hover css style, , thats tried do, can't make work.

i think problem because css has pseudo-elements :after, :before , :hover , combined.

here code:

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 hover on stylized button</button> <!--this shine effect taken 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");   */ }); 

i made jsfiddle, guys can understand i'm trying do.

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

ps: i'm chilean native language spanish.

you forgot add :before , :after test classes.

so, this:

.test1, .btnshine:before

should this:

.test1:before, .btnshine:before

see updated fiddle

i consider adding "test" classes 1 class , writing styles around 1 class. combined of them , called .shine in this fiddle.

so selector this:

.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; }