javascript - 使用 Css 和 jQuery 在悬停时更改文本

Question

我的网站上有一个按钮，当您单击它时会展开一些文本。当您将鼠标悬停在该按钮上时，我需要这样做，文本更改为“展开”，当文本展开时，您将鼠标悬停在同一按钮上，文本需要更改为“折叠”。这是我的代码: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

您可以使用类和悬停选择器通过 CSS 处理此问题，而不是使用 jQuery 事件。

类似于:

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

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

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

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

然后你可以用 jQuery 应用你的类，你的 CSS 会处理它😁