Question

我的网站上有一个按钮，当你点击展开一些文字时。当我将鼠标悬停在该按钮上时，我需要这样做，文本更改为＆＃34;展开＆＃34;当文本被展开时，如果将鼠标悬停在同一个按钮上，则需要将文本更改为＆＃34; collapse＆＃34;。这是我的代码： 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来处理它

Answer 2

如何在$（'＃btnSlideUp'）上使用.hover？

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 3

就像你使用.click事件监听器一样，你可以使用.hover函数

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

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

Answer 4

您可以添加悬停事件来切换此项，我正在使用标记设置按钮的悬停文本，如果其c按钮应该说collapse其他expand。

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>

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

4 个答案: