从其他div

Question

该按钮改变了＃TE; TE LAAT＆＃34;进入＆＃34; NU BETALEN＆＃34;在CSS上悬停，就像一个魅力。现在我想要＆＃34; TE LAAT＆＃34;仅当您单击＆＃34; collapsible-header＆＃34;时才更改的文本DIV。因此，当div变为活动状态时（我现在添加了该类，但是当您单击它时，活动类会切换。）按钮中的文本将更改为NU BETALEN。

基本上改变＆＃34; TE LAAT＆＃34;进入数据悬停或数据激活＆＃34; NU BETALEN＆＃34;当div collapsible-header也有活动类时。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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