鼠标悬停显示(/隐藏)DIV

最新推荐文章于 2023-06-03 12:50:35 发布

蓝焰鱼

最新推荐文章于 2023-06-03 12:50:35 发布

阅读量5.8k

点赞数 2

分类专栏：网页开发文章标签： html jquery

本文链接：https://blog.youkuaiyun.com/weixin_43488742/article/details/105511777

版权

网页开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过HTML和jQuery实现鼠标悬停时显示或隐藏DIV的效果，包括具体的HTML结构和jQuery代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标悬停显示(/隐藏)DIV

效果：
(1)
(2)

源码

<!DOCTYPE html>  
<html lang="en">  
<head>  
   <meta charset="utf-8">
   <title>鼠标悬停显示DIV</title>  
</head>  
<body>  
<div id="b1" style="width: 200px;height: 50px;background-color: red">1111111</div>
<div id="b2" style="width: 200px;height: 50px;margin-left: 220px;margin-top: -50px; background-color: yellow">2222222</div>
<div id="v1" style="width: 400px;height: 200px;background-color: red;">111</div>
<div id="v2" style="width: 400px;height: 200px;background-color: yellow;">222</div>
<script>
    window.onload = function(){
        var aa = document.getElementById("b1");
        var bb = document.getElementById("b2");
        var xx = document.getElementById("v1");
        var yy = document.getElementById("v2");
        xx.style.display = "none";
        yy.style.display = "none";
        aa.onmouseover = function(){
            xx.style.display = "block";
            yy.style.display = "none";
        };
        aa.onmouseout = function(){
            xx.style.display = "block";
            yy.style.display = "none";
        };
        bb.onmouseover = function(){
            yy.style.display = "block";
            xx.style.display = "none";
        };
        bb.onmouseout = function(){
            yy.style.display = "block";
            xx.style.display = "none";
        };
    };
</script>
</body>  
</html>