使用jquery实现鼠标移入目标框出现悬浮框功能
使用jQuery实现鼠标移入目标框出现悬浮框功能的代码示例如下：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬浮框效果</title>
<style>
.target-box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
position: relative;
margin: 20px;
}
.hover-box {
width: 150px;
height: 150px;
background-color: #ff0000;
position: absolute;
top: 0;
left: 100%;
display: none;
}
</style>
</head>
<body>
<div class="target-box">
鼠标悬浮我试试
<div class="hover-box">这是悬浮框</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// jQuery 代码
$(document).ready(function() {
$('.target-box').mouseenter(function() {
$(this).find('.hover-box').show();
}).mouseleave(function() {
$(this).find('.hover-box').hide();
});
});
</script>
</body>
</html>在这个例子中，.target-box 是鼠标悬浮的目标框，.hover-box 是悬浮框。当鼠标移入 .target-box 时，.hover-box 会显示；当鼠标移出 .target-box 时，.hover-box 会隐藏。这个功能可以通过jQuery的 mouseenter 和 mouseleave 事件来实现。
评论已关闭