切换文本悬停在图像上
jQuery: toggle text on hover over image?
在jQuery中,当用户将鼠标悬停在图像上时,我如何获得文本切换?
我有代码,当用户悬停时改变文本:
# HTML
<table id="support-people">
<tr>
<td><img data-bio="Bio 1" src="person1.jpg" alt="Person 1"/></td>
<td><img data-bio="Bio 2" src="person2.jpg" alt="Person 2"/></td>
</tr>
<tr><td colspan="2">
<p id="support-person-description">Default text</p>
</td></tr></table>
# JS
$('#support-people img').hover(function(){
$('#support-person-description').text(this.getAttribute("data-bio"));
});
但是当用户离开时,文本保持不变-是否有一种简洁的方法可以让它切换回原始的默认文本?
谢谢。
使用悬停的两个函数(第一个用于鼠标悬停,第二个用于鼠标悬停),然后在第一个中将oldtext保存为元素上的数据。然后读取该值并在第二个函数中设置它:
$('#support-people img').hover(function(){
var desc = $('#support-person-description');
desc.data('oldtext', desc.text()).text(this.getAttribute("data-bio"));
}, function() {
var desc = $('#support-person-description');
desc.text(desc.data('oldtext'));
});
try:
$('#support-people img').hover(function(){
var $elem = $('#support-person-description');
$elem.data('oldText', $elem.text()).text(this.getAttribute("data-bio")); // Add text on mouse hover
},function(){
var $elem = $('#support-person-description');
$elem.text($elem.data('oldText')); // Return to default
});
将javascript更改为以下内容:
$('#support-people img').hover(function(){
$('#support-person-description').text(this.getAttribute("data-bio"));
}, function(){
$('#support-person-description').text('Default text');
});
可以在同一个调用中编写onMouseOver和onMouseOut函数http://api.jquery.com/hover/
.hover()
方法需要两个参数。1表示悬停时发生的情况,1表示不悬停时发生的情况。您的代码只有显示元素的指令。
相关文章:
- JQuery图像悬停并单击冲突
- 将图像悬停在左侧时,右侧的图像会发生变化
- 图像悬停时的取消滑块
- 图像悬停时的文本叠加 - 响应式
- Jquery 图像悬停效果错误
- Jquery图像悬停卡住了
- 图像悬停在几个图像上不起作用
- Adipoli jQuery 图像悬停效果
- HS 画布图像悬停/交换
- 在文本链接上显示图像 悬停在 CSS 或 JS 上
- HTML/CSS图像悬停-使用不同大小的图像
- 在图像悬停时显示文本而不是光标
- 图像悬停并替换-jquery
- Java脚本图像悬停效果
- JQuery图像悬停在之前/之后
- jQuery图像悬停时的简单文本更改
- JQuery在图像悬停显示标题标签内容,可能的
- Jquery交换图像悬停在不同的元素
- 只有Javascript -改变图像悬停在隐藏的单选按钮
- 图像悬停查询效果