Home >Web Front-end >HTML Tutorial >Newbies, please help._html/css_WEB-ITnose
Newbies, please help._html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:361022browse
I want to achieve the following effect:
This is the style I made; the problem is that when I hover the mouse over td, the entire row will be enlarged, but the above is no problem ( The above is written by someone else)
The effect I want is: don’t expand the entire row when hovering the mouse, just make the td column larger
Reply to the discussion (solution)
It seems that the effect is the same, please explain clearly if there is any difference.
It seems the effect is the same, please explain clearly what is the difference.
In the above one, only the td column becomes larger, but mine is the whole row, that is, the TR will become larger.
The above one also becomes larger, please post the code first.
The above one also becomes larger. , paste the code first
Keep the other things above unchanged, just make the selected one larger. The whole row I made is larger,
.table1 tbody tr .td1{border:1px #527298 solid;font-weight:bold;} /*鼠标悬浮边框加粗字体加粗*/
overflow:hidden;
Add this to see See
Set a fixed width
If you want to keep it from being too big, you can add one in TD such as 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 and set the width and height of 45a2772a6b6107b401db3c9b82c049c2 so that no matter It won’t get bigger no matter what, and at the same time add overflow:hidden
If you want to keep it from getting bigger, you can add something like 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 in TD to set the width and height of 45a2772a6b6107b401db3c9b82c049c2 , so that it will not become larger in any case, and add overflow:hidden
Nope
CSS code
overflow:hidden;
Add this Take a look
It doesn’t work
Put a div in the td, and then give the div a border when you hover the mouse.
Have you read the code that others have done?
Is the suspension on td imitated by 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> What does the original poster mean?
Have you read the code that others have done?
Is the suspension on td imitated by div?
Didn’t read the code - -!
It’s not that I don’t want to see it, it’s just that I can’t see it. Others used winfrom to make this.
Different browsers have different default values. You can use the background image of 04a9424aea79d7e9b86559d6a25ece7c to solve the problem.