CssとjQueryを使用してホバーのテキストを変更します

Question

私は自分のウェブサイトにあるテキストを展開するボタンをクリックします。そして、そのボタンの上にマウスを置くと、テキストが "Expand"に変わり、テキストが展開され、同じボタンの上にマウスを置くと、テキストを "折りたたむ"に変更する必要があります。ここ は私のコードです： HTML：

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

のCss：

#p1{ 
    display:none; 
    } 

のjQuery：

var isUp=true; 

     $('#btnSlideUp').click(function() { 

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

は、与えられた任意の助けをありがとうございました！

Answer 1

方法を使用することができ、.clickイベントリスナーを使用と同じように？

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>

Answer 2

さて、あなたは$（ '＃btnSlideUp'）に.hoverを使用することについて.hover機能

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

https://api.jquery.com/hover/

Answer 3

あなたはこれを切り替えるにはホバーイベントを追加することができ、そのcボタンが他のcollapseexpandを言う必要がある場合、私は、ボタンのホバーテキストを設定するためのフラグを使用しています。むしろあなたはクラスやホバーセレクターを使用してCSSでこれを扱うことができるjQueryのイベントを使用するよりも

var isUp=true, button = $('title'), text = $('#p1'), mode; 
 

 
     $('#btnSlideUp').click(function() { 
 

 
      if(isUp){ 
 
       text.slideDown(1000); 
 
       isUp=false; 
 
       setTimeout(function(){mode = 'c'}, 1000); 
 
      }else{ 
 
       text.slideUp(1000); 
 
       isUp=true; 
 
       setTimeout(function(){mode = 'e'}, 1000); 
 
       } 
 
      }); 
 
      $('#btnSlideUp').hover(function() { 
 

 
      if(mode === 'c'){ 
 
       $(this).children().html('Collapse'); 
 
      }else{ 
 
       $(this).children().html('Expand'); 
 
       } 
 
      }, function(){$(this).children().html('TEXT');}); 
 
    

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

Answer 4

。

ような何か：

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

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

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

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

次に、あなただけのjQueryを使って自分のクラスを適用することができますし、CSSはそれの世話をする