要实现鼠标经过时弹出层且该层可以点击的功能，你可以使用jQuery的`mouseenter`和`mouseleave`事件来触发弹出层的显示和隐藏。同时，确保弹出层内的元素是可点击的，你需要确保在弹出层显示时，鼠标离开弹出层本身不会触发`mouseleave`事件导致它立即隐藏。这通常可以通过阻止事件冒泡到触发`mouseleave`的元素来实现。
以下是一个简单的示例代码，展示了如何使用jQuery来实现这个功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Enter and Leave Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#hover-container {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
position: relative;
}
#popup {
display: none;
position: absolute;
top: 0;
left: 100%; /* 初始位置在hover-container的右侧 */
width: 100px;
height: 100px;
background-color: lightgreen;
z-index: 1; /* 确保弹出层在上方 */
}
</style>
</head>
<body>
<div id="hover-container">
Hover over me
<div id="popup">Popup Content</div>
</div>
<script>
$(document).ready(function() {
$('#hover-container').mouseenter(function() {
$('#popup').show(); // 显示弹出层
}).mouseleave(function(e) {
// 检查鼠标是否离开了hover-container但进入了popup
if (!$(e.toElement).closest('#popup').length) {
$('#popup').hide(); // 如果不是，隐藏弹出层
}
});
// 确保在popup内部点击时不会触发mouseleave
$('#popup').click(function(e) {
e.stopPropagation(); // 阻止事件冒泡
});
});
</script>
</body>
</html>
在这个例子中，`#hover-container`是鼠标需要悬停在其上的元素，而`#popup`是当鼠标悬停在`#hover-container`上时显示的弹出层。通过检查`mouseleave`事件的目标元素是否位于`#popup`内部，我们可以决定是否隐藏弹出层。同时，在`#popup`上绑定了`click`事件，并使用`e.stopPropagation()`来阻止事件冒泡，这样点击弹出层时就不会触发`#hover-container`的`mouseleave`事件。