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

Question

该按钮在悬停时使用 CSS 将“TE LAAT”更改为“NU BETALEN”，效果非常好。现在我希望“TE LAAT”文本仅在您单击“collapsible-header”div 时更改。因此，当该 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');
});