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

当鼠标悬停在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>

最佳答案

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

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