怎样可以 鼠标移动到文字上 显示出另一个隐藏的div

发布网友 发布时间：2022-03-17 01:29

我来回答

共2个回答

热心网友 时间：2022-03-17 02:58

HTML部分：

<div class="photograph_down">    
<div class="empty">&nbsp;</div> 
<div class="mid">
  <div class="photo_menu" onmouseover="pic()" onmouseout="nopic()"> <p><a href="#photograph">摄影</a></p></div>
     <div id="works_m" onmouseover="stop()">
         <div class="works_menu" onmouseover="open1()" onmouseout="li1()"><a href="#">作品一</a></div>
         <div class="works_menu" onmouseover="open2()" onmouseout="li2()"><a href="#">作品二</a> </div>
         <div class="works_menu" onmouseover="open3()" onmouseout="li3()"> <a href="#">作品三</a></div>
     </div>  
</div>
     <div class="bottom"></div>
     <div id="one" class="picc">我是作品一<img src="jack.png" alt="" /></div>
     <div id="two" class="picc">我是作品二<img src="jack.png" alt="" /></div>
     <div id="three" class="picc">我是作品三<img src="jack.png" alt="" /></div>

</div>

CSS部分：

.empty{width:500px;height:50px;background:rgb(153,0,0);}
#works_m{ width:102px;height:61px;float:left;
         position: absolute;left:200px;top:50px;display: none;
}
.works_menu{font-family:"方正兰亭纤黑简体";font-size:15px;text-align:center;width:120px;height:25px;margin:1px;background:#EEE;  }
.works_menu a{color:#000;text-decoration:none}
.works_menu a:hover{font-weight:bold;}

.photo_menu{width:100px;height:78px;font-family:"方正兰亭纤黑简体";font-size:23px;float:left;text-align:center;background:#DDD;position: absolute;left:100px;top:50px;
}
.photo_menu a:hover{font-weight:bold;}
.photo_menu a{color:#000;text-decoration:none}

.mid{
    background:rgb(204,204,204);width:500px;height: 200px;
    position: absolute;float:left;}
.bottom{
    background:rgb(153,153,153);
    width:500px;height:50px;
    position: absolute;
    top:250px;
}
.picc{
    display: none;
    position: absolute;
    top:300px;
}

JS部分：

 function pic(){
        works_m.style.display="block";
    }

    function nopic(){
        timer=setTimeout(function(){works_m.style.display="none";},1000);
    } 
    function stop(){
        clearTimeout(timer);
    }
    function open1(){
        one.style.display="block"
    }
    function open2(){
        two.style.display="block"
    }
    function open3(){
        three.style.display="block"
    }
    
    function li1(){
        one.style.display="none";
    }
    function li2(){
        two.style.display="none";
    }
    function li3(){
        three.style.display="none";
    }

热心网友 时间：2022-03-17 04:16

看一天 vtef