根据鼠标位置显示div内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=GBK" pageEncoding="GBK" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" rev="stylesheet" href="/ent/gb/css/common.css" type="text/css" media="screen" />
<link rel="stylesheet" rev="stylesheet" href="/ent/gb/css/table.css" type="text/css" media="screen" />
<script language="javascript" src="/ent/js/jquery-1.6.2.min.js"></script>
<script language='javascript'><!--
$(function(){
//添加一行
$("#addline").click(function(){
var addStr = "";
addStr = "<tr>"+
"<td>输入控件</td>"+
"<td><input type='text' name='textName' value='textName' /></td>"+
"</tr>";
$("#div_table").append(addStr);
});
//删除一行
$("#delline").click(function(){
$("#div_table>tbody>tr:last").remove();
});
//鼠标移入移出
$("#move_div").hover(function(e){
var page_x = e.pageX;
var page_y = e.pageY;
$("#no_style").css({"left":page_x+"px","top":page_y+"px"});
$("#no_style").fadeTo("slow",1);
},function(){
$("#no_style").hide(1000);
});
})
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
</head>
<body onload="">
<form action="/ent/main" method="post" name="form1" id="form1">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_com_ie10" align="center">
<tr >
<td class="thList">境外账号</td>
<td class="thList">开户银行BIC</td>
<td class="thList">账户名称</td>
<td class="thList">币种</td>
<td class="thList">开户行国别</td>
<td class="thList">开户日期</td>
<td class="thList">维护日期</td>
<td class="thList">记录状态</td>
</tr>
<tr >
<td><a href="#" id="move_div">境外账号</a></td>
<td>开户银行BIC</td>
<td>账户名称</td>
<td>币种</td>
<td>开户行国别</td>
<td>开户日期</td>
<td>维护日期</td>
<td>记录状态</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="10"></td>
</tr>
<tr>
<td><hr /></td>
</tr>
</table>
<fieldset >
<legend>div的高度和宽度自适应</legend>
<div id="div_height_auto" style="border-width:5px; border-color:Black; width:400px">
<table id="div_table" border="1" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td height="10">输入控件</td>
<td height="10"><input type="text" name="textName" value="textName" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td height="10"><input type="button" id="addline" name="addline" value="添加一行" /></td>
<td height="10"><input type="button" id="delline" name="delline" value="删除一行" /></td>
</tr>
</tfoot>
</table>
</div>
</fieldset>
<hr />另外的div
</form>
---------------------div的display属性值为none时是不占用页面空间的。
<div id="no_style" style="display:none;width:400px;height:100px;border:1px solid blue;background-color:green">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr >
<td class="thList">收款账号</td>
<td class="thList">收款户名</td>
</tr>
<tr >
<td>6996865896536589</td>
<td>中国工商银行</td>
</tr>
<tr >
<td>9995685896536740</td>
<td>浦东发展银行</td>
</tr>
</table>
</div>
-------------------
</body>
</html>
css：
/*div高度自适应*/
#div_height_auto{
border-width:5px;
border-color:Black;
height:auto !important;
height:100px;/*初始化高度*/
min-height:100px;/*最低高度是200px*/
z-index:1;
}
#no_style{
position:absolute;
z-index:999;
}
相关推荐
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->