WEB 教程
实践 示例
HTML 参考手册
CSS 参考手册
PHP 参考手册

如何检查鼠标是否在jQuery中的元素上

主题:JavaScript / jQuery上一页|下一页

答案:使用 CSS :hover 伪类

您可以简单地将 CSS :hover 伪类选择器与 jQuery mousemove() 结合使用来检查鼠标是否在 jQuery 中的元素上。

当您将鼠标指针放在或移开 DIV 元素的框时,以下示例中的 jQuery 代码将在网页上显示一条提示消息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Check If the Mouse is Over an Element</title>
<style>
    div{
        margin: 80px;
        height: 200px;        
        background: orange;
    }  
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(document).mousemove(function(){
         if($("#myDiv:hover").length != 0){
            $(".hint").text("Mouse is Over the DIV Element.");
        } else{
            $(".hint").text("Mouse is Outside the DIV Element.");
        }
    });
});
</script>
</head>
<body>
    <div id="myDiv"></div>
    <p class="hint"><!-- Hint text will be displayed here --></p>
</body>
</html>

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:

Advertisements