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

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

效果:
(1)鼠标悬停显示(/隐藏)DIV_第1张图片
(2)鼠标悬停显示(/隐藏)DIV_第2张图片

源码

  
<html lang="en">  
<head>  
   <meta charset="utf-8">
   <title>鼠标悬停显示DIVtitle>  
head>  
<body>  
<div id="b1" style="width: 200px;height: 50px;background-color: red">1111111div>
<div id="b2" style="width: 200px;height: 50px;margin-left: 220px;margin-top: -50px; background-color: yellow">2222222div>
<div id="v1" style="width: 400px;height: 200px;background-color: red;">111div>
<div id="v2" style="width: 400px;height: 200px;background-color: yellow;">222div>
<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>  

你可能感兴趣的:(网页开发)