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>

  • 相关阅读:
    httpclient5:信任所有证书,调用公众号接口
    驾驶技能考试系统:常见故障原因分析及排除
    C#:Combox实现key,value
    C#:密码框的两种方式
    C#:动态添加或删除控件,并根据控件名称获得控件
    微服务设计模式
    微服务设计模式
    微服务设计模式
    微服务设计模式
    微服务设计模式
  • 原文地址:https://www.cnblogs.com/htys/p/3503632.html
Copyright © 2011-2022 走看看