初学者各位.
日期：2014-05-17 浏览次数：20680 次
菜鸟求助各位...
我想实现如下图效果：
这是我做的样式；问题是，我鼠标悬浮到td上会把整行都撑大，可是上面这个就没问题（上面是别人写的）
我想要的效果是：鼠标悬浮别把整行都撑大，就td列变大
------解决方案--------------------
在td里放div，然后悬浮鼠标时给div边框。
------解决方案--------------------
我想实现如下图效果：
这是我做的样式；问题是，我鼠标悬浮到td上会把整行都撑大，可是上面这个就没问题（上面是别人写的）
我想要的效果是：鼠标悬浮别把整行都撑大，就td列变大
------解决方案--------------------
在td里放div，然后悬浮鼠标时给div边框。
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/reset.css" />
<style>
.table {
margin:100px;
background:#f2f2f2;
color:#4873ff;
text-align:center;
border-collapse:separate;
}
.table td {
display:inline-block;
position:relative;
width:60px; height:22px; line-height:22px;
}
.tr-hover {
background:#d4e3ff;
}
td div {
position:absolute; left:-2px; top:-2px;
width:66px; height:26px;
background:#f2f2f2;
border:1px solid #7a7a7a;
font-weight:bold;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
</table>
<script>
function $(el){
return typeof el == 'string' ? document.getElementById(el) : el;
}
function $t(name, cot){
cot = cot || document;
return cot.getElementsByTagName(name);
}
var tr = $t('tr');
for(var i = 0, len = tr.length; i < len; i++){
tr[i].onmouseover = function(){
this.className = 'tr-hover';
}
tr[i].onmouseout = function(){
this.className = '';
}
}
var td = $t('td');
for(var i = 0, len = td.length; i < len; i++){
td[i].onmouseover = function(){
if( !$t('div', this).length ){
var div = document.createElement('div');
div.innerHTML = this.innerHTML;
this.appendChild(div);
}else{
$t('div', this)[0].style.display = 'block';
}
this.style.zIndex = 999;
}
td[i].onmouseout = function(){
$t('div', this)[0].style.display = 'none';
this.style.zIndex = 0;
}
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
