使用Css和jQuery更改悬停文本
使用Css和jQuery更改悬停文本
提问于 2017-10-15 17:27:52
我在我的网站上有一个按钮，当你点击展开一些文本。我需要这样做，当你将鼠标悬停在那个按钮上时，文本更改为“展开”，当文本被展开时，当你在同一个按钮上悬停时，需要将文本更改为“折叠”。下面是我的代码: 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;
}
});非常感谢您的帮助！
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-10-15 17:37:36
在$('#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>
Stack Overflow用户
发布于 2017-10-15 18:23:06
与使用jQuery事件不同，您可以使用CSS使用类和悬停选择器来处理这个问题。
类似于：
button.expanded::before {
content: 'Expanded';
}
button.expanded:hover::before {
content: 'Collapse';
}
button::before {
content: 'Collapsed';
}
button:hover::before {
content: 'Expand';
}然后，您可以使用jQuery应用您的类，而CSS则负责处理它。
Stack Overflow用户
发布于 2017-10-15 17:29:50
就像您使用.click事件侦听器一样，您可以使用.hover函数。
$('#btnSlideUp').hover(function() { /*do whatever you need here */ });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46757913
复制相关文章
相似问题
腾讯云开发者
