zoukankan      html  css  js  c++  java
  • 鼠标移上去用文本框的形式展示出单元格的值隐藏的部分

     1 <html>
     2 
     3 <div class="table">
     4 
     5   <ul class="row">
     6 
     7     <li>table1</li>
     8 
     9     <li>table2</li>
    10 
    11     <li>table3</li>
    12 
    13     <li>table4</li>
    14 
    15   </ul>
    16 
    17 </div>
    18 
    19 <script type="text/javascript">
    20 
    21 //单元格鼠标放上去出现提示框
    22 $(".row").each(function(){
    23 $(this).find("li").each(function()
    24 {
    25 $(this).hover(function()
    26 {
    27 var x=100;
    28 var y=200;
    29 this.myTitle = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
    30 this.title=$(this).text();
    31 var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建提示框
    32 $("body").append(tooltipHtml); //添加到页面中
    33 $("#tooltip").css({
    34 "top":(e.pageY+y)+"px",
    35 "left":(e.pageX+x)+"px"
    36 }).show("fast");//设置提示框的坐标,并显示
    37 },function (){
    38 this.title=this.myTitle; //重新设置title
    39 $("#tooltip").remove(); //移除弹出框
    40 }).mousemove(function (e){ //跟随鼠标移动事件
    41 $("#tooltip").css({
    42 "top": (e.pageY + y) + "px",
    43 "left": (e.pageX + x) + "px"
    44 })
    45 })
    46 })
    47 });
    48 
    49 </script>
    50 
    51 </html>
  • 相关阅读:
    CSUFT 1002 Robot Navigation
    CSUFT 1003 All Your Base
    Uva 1599 最佳路径
    Uva 10129 单词
    欧拉回路
    Uva 10305 给任务排序
    uva 816 Abbott的复仇
    Uva 1103 古代象形文字
    Uva 10118 免费糖果
    Uva 725 除法
  • 原文地址:https://www.cnblogs.com/W--Jing/p/6016615.html
Copyright © 2011-2022 走看看