首页 > web前端 > html教程 > 菜鸟求助各位._html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 12:08:36
原创
1027 人浏览过

我想实现如下图效果:


这是我做的样式;问题是,我鼠标悬浮到td上会把整行都撑大,可是上面这个就没问题(上面是别人写的)
我想要的效果是:鼠标悬浮别把整行都撑大,就td列变大


回复讨论(解决方案)

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

看效果都一样,哪有不同说清楚些。
上面那个只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做的

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

的背景图片来解决。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板