菜鸟求助各位._html/css_WEB-ITnose-html教程-PHP中文网

菜鸟求助各位._html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:08:36

原创

1114人浏览过

我想实现如下图效果：

这是我做的样式；问题是，我鼠标悬浮到td上会把整行都撑大，可是上面这个就没问题（上面是别人写的）
我想要的效果是：鼠标悬浮别把整行都撑大，就td列变大

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

回复讨论(解决方案)

看效果都一样，哪有不同说清楚些。

看效果都一样，哪有不同说清楚些。
上面那个只td列变大，而我的是整行，也就是TR都会变大

上面也变大了，先贴代码

上面也变大了，先贴代码
上面的别的不变，就选中的变大，我做的整行都大，

.table1 tbody tr .td1{border:1px #527298 solid;font-weight:bold;}  /*鼠标悬浮边框加粗字体加粗*/

登录后复制

overflow:hidden;

登录后复制

加上这个看看

设置固定宽度

想要不撑大，可以在TD里面加一个比如设置好的宽高，这样无论如何都不会变大，同时加上overflow:hidden

想要不撑大，可以在TD里面加一个比如设置好的宽高，这样无论如何都不会变大，同时加上overflow:hidden
不行

CSS code

overflow:hidden;

加上这个看看
不行啊

在td里放div，然后悬浮鼠标时给div边框。

别人做的你看代码了吗？
td上悬浮是用的div模仿的吗？

<!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>

登录后复制

楼主这个意思？

别人做的你看代码了吗？
td上悬浮是用的div模仿的吗？
没看代码 - -！
不是不想看，是看不了，别人这个是用winfrom做的

不同的浏览器的默认值不一样，你可以用

的背景图片来解决。