Maison > Article > interface Web > 菜鸟求助各位._html/css_WEB-ITnose
菜鸟求助各位._html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:08:36981parcourir
我想实现如下图效果：
这是我做的样式；问题是，我鼠标悬浮到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做的
不同的浏览器的默认值不一样，你可以用
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：我想做个下拉菜单，不知道怎么做，能帮我看看吗_html/css_WEB-ITnoseArticle suivant：网页视频播放_html/css_WEB-ITnose