从其他div的onClick更改悬停按钮类

Question

当鼠标悬停在CSS上时，该按钮会将“ TE LAAT”更改为“ NU BETALEN”，就像一个超级按钮一样。 现在，我希望仅在单击“可折叠标头” div时更改“ TE LAAT”文本。 因此，当该div变为活动状态时（我现在添加了该类，但是单击该活动类时会进行切换。）按钮中的文本变为NU BETALEN。

当div可折叠标头也具有活动类时，基本上将“ TE LAAT”更改为数据悬停或数据活动的“ NU BETALEN”。

 .collapsible-header.active { background-color: #e4e4e4; } /* .button */ .button { display: inline-block; position: relative; min-width: 7rem; margin-top: 3.7em; margin-right: 15px; padding: 5 6px; border: 3px solid #EE6E73; border-radius: 2px; overflow: hidden; text-decoration: none; font-size: 0.8rem; font-weight: bold; outline: none; color: #fff; background-color: #EE6E73; font-family: 'Roboto', sans-serif; line-height: 1.7rem !important; } .button span { -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .button:before, .button:after { content: ''; position: absolute; top: ; left: 0; width: 100%; text-align: center; opacity: 0; -webkit-transition: .4s,opacity .6s; -moz-transition: .4s,opacity .6s; -o-transition: .4s,opacity .6s; transition: .4s,opacity .6s; } /* :before */ .button:before { content: attr(data-hover); -webkit-transform: translate(-150%,0); -moz-transform: translate(-150%,0); -ms-transform: translate(-150%,0); -o-transform: translate(-150%,0); transform: translate(-150%,0); } /* :after */ .button:after { content: attr(data-active); -webkit-transform: translate(150%,0); -moz-transform: translate(150%,0); -ms-transform: translate(150%,0); -o-transform: translate(150%,0); transform: translate(150%,0); } /* Span on :hover and :active */ .button:hover span, .button:active span { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } /* We show :before pseudo-element on :hover and :after pseudo-element on :active */ .button:hover:before, .button:active:after { opacity: 1; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } /* We hide :before pseudo-element on :active */ .button:active:before { -webkit-transform: translate(-150%,0); -moz-transform: translate(-150%,0); -ms-transform: translate(-150%,0); -o-transform: translate(-150%,0); transform: translate(-150%,0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } 

 <link href="https://raw.githubusercontent.com/Dogfalo/materialize/master/css/ghpages-materialize.css" rel="stylesheet"/> <button class="button right" type="button" data-hover="NU BETALEN" data-active="NU BETALEN TWEE"><span>TE LAAT</span></button> <div class="collapsible-header active"> <p>content</p> </div> 

Answer 1

您只需要在CSS .button:hover / .button:active替换为.button.active ，然后添加以下JS即可切换其.active类：

$('.collapsible-header').click(function(){
  $('.button').toggleClass('active');
});