问使用Css和jQuery更改悬停文本

EN

var isUp = true;

$('#btnSlideUp').hover(
  function() {
    if (isUp) {
      $(this).find('h1').text('Expand');
    } else {
      $(this).find('h1').text('Collapse');
    }
  },
  function() {
    $(this).find('h1').text('TEXT');
  }
)

$('#btnSlideUp').click(function() {
  if(isUp){
    $('#p1').slideDown(1000);
    isUp=false;
  }else{
    $('#p1').slideUp(1000);
    isUp=true;
  }
});

#p1{
  display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
  <h1 class="jumbotron-heading" id="title">TEXT</h1> 
 </button>
 <p  class="lead text-muted" id="p1">TEXT</p>

button.expanded::before {
    content: 'Expanded';
}

button.expanded:hover::before {
    content: 'Collapse';
}

button::before {
    content: 'Collapsed';
}

button:hover::before {
    content: 'Expand';
}

$('#btnSlideUp').hover(function() { /*do whatever you need here */ });