zoukankan      html  css  js  c++  java
  • js实现鼠标移上去显示详细信息

    <body>

    <DIV id=page>
    <DIV id=pageNav>
    <UL class="solidmenupage">
     <LI id="li1" onmouseover="mouseover(this)"   onmouseout="mouseover()" title="封面"  ><a id="lis1"  href="lhrhxm-ggfw-fm.html" target='mainFrame' onclick=""  name="ssss">第一页</a></LI>
        <LI id="li2" onmouseover="mouseover(this)" onmouseout="mouseover()"  title="材料一" ><a id="lis2" href="lhrhxm-ggfw-part1.html" target='mainFrame' onclick="" >第二页</a></LI>
     <LI id="li3" onmouseover="mouseover(this)" onmouseout="mouseover()" title="材料二"  ><a id="lis3" href="lhrhxm-ggfw-part2.html" target='mainFrame'  onclick="" >第三页</a></LI>
     <LI id="li4" onmouseover="mouseover(this)" onmouseout="mouseover()" title="附件"  ><a id="lis4" href="lhrhxm-ggfw-part3.html"  target='mainFrame' onclick="" >第四页</a></LI>
     </UL>
      </DIV>
    </DIV>

    <script type="text/javascript">    
      var li = document.getElementsByTagName("li");    
      var detaildiv = document.createElement("div");    
      detaildiv.style.width = "100px";    
      detaildiv.id = "detail";    
      detaildiv.style.backgroundColor = "#ccc"    
      detaildiv.style.height = "100px";    
      detaildiv.style.border = "1px solid #f00";
      detaildiv.style.position = "absolute";    
       function mouseover(demo) {
        var   title =  document.getElementsByTagName("detail").title;
        detaildiv.innerHTML = title.innerHTML;
     //   demo.innerHTML;  
        document.body.appendChild(detaildiv);        
        document.getElementById("detail").style.display = "";    
        detaildiv.style.left = event.clientX + "px";      
        detaildiv.style.top = event.clientY + "px";     }  
       function mouseout() {        
       document.getElementById("detail").style.display = "none";     }
    </script>
    </body>

  • 相关阅读:
    【例题 8-11 UVA-10954】Add All
    【例题 8-10 UVA
    【BZOJ1226】学校食堂Dining(状压DP)
    【Tyvj1601】魔兽争霸(主席树,树套树)
    【BZOJ3504】危桥(最大流)
    【BZOJ1812】riv(多叉树转二叉树,树形DP)
    【Vijos1412】多人背包(背包DP)
    【Codevs1907】方格取数3(最小割)
    【Codevs1227】方格取数2(费用流)
    【Tyvj1982】武器分配(费用流)
  • 原文地址:https://www.cnblogs.com/htys/p/3503632.html
Copyright © 2011-2022 走看看