Home > Article > Web Front-end > 菜鸟求助各位._html/css_WEB-ITnose
菜鸟求助各位._html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:36935browse
我想实现如下图效果：
这是我做的样式；问题是，我鼠标悬浮到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做的
不同的浏览器的默认值不一样，你可以用
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：我想做个下拉菜单，不知道怎么做，能帮我看看吗_html/css_WEB-ITnoseNext article：网页视频播放_html/css_WEB-ITnose