Question

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

我想鼠标移到“摄影”（photo_menu）上面时，works_m这个div（其中里面放着“作品一”“作品二”“作品三”）就显示出来，但是其他时候是隐藏的，然后我鼠标又移到“作品一”上时photograph_pic1（放图片的）这个div也是从原来的隐藏显示出来，怎么改下面的代码，可以做到我鼠标移到作品一上是photograph_pic1渐渐显示出来吗，差不多是透明度从0到100%那样的效果。
<div class="photograph_pic1"></div>
<div class="photograph_pic2"></div>
<div class="photograph_pic3"></div>

<div class="photograph_down">
<div class="empty"> </div>
<div class="photo_menu">
<p><a href="#photograph">摄影</a></p></div>
<div class="works_m">
<div class="works_menu">
<a href="#">作品一</a></div>
<div class="works_menu">
<a href="#">作品二</a> </div>
<div class="works_menu">
<a href="#">作品三</a></div>
</div>
</div>

CSS:
.works_m{position:absolute; z-index:6;
width:300px;height:200px;
margin-left:21.5%;margin-top:0.1%}
.works_menu{width:20%;font-family:"方正兰亭纤黑简体";font-size:15px;text-align:center}
.works_menu a{color:#000;text-decoration:none}
.works_menu a:hover{font-weight:bold;}

.photo_menu{width:20%;font-family:"方正兰亭纤黑简体";font-size:19px;float:left;text-align:center}
.photo_menu a:hover{font-weight:bold;}
.photo_menu a{color:#000;text-decoration:none}

Answer 1

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";
    }

Answer 2

看一天 vtef