当您使用jQuery在图标上触发鼠标悬停事件时,可以使用以下代码来显示一个简单的文本框:
$(document).ready(function() {
$('.icon').hover(function() {
// 当鼠标悬停在图标上时,显示文本框
$(this).append('<div class="tooltip">这是一个简单的文本框</div>');
}, function() {
// 当鼠标离开图标时,隐藏文本框
$('.tooltip').remove();
});
});
在这个例子中,我们首先使用jQuery选择器选中包含图标的元素,然后使用.hover()
方法来监听鼠标悬停事件。当鼠标悬停在图标上时,我们使用.append()
方法在图标元素后面添加一个包含文本的<div>
元素,并为其添加一个类名tooltip
。当鼠标离开图标时,我们使用.remove()
方法删除文本框。
您可以根据需要自定义文本框的样式和内容,以便它们更好地适应您的网站设计。
领取专属 10元无门槛券
手把手带您无忧上云