ホームページ > 記事 > ウェブフロントエンド > 初心者の方は助けてください。_html/css_WEB-ITnose
初心者の方は助けてください。_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:08:36981ブラウズ
以下に示すような効果を実現したいです。
これは私が作成したスタイルです。問題は、マウスを td の上に置くと行全体が拡大されることですが、上記のものは問題ありません (上記他の人が書いたものです)
私 望ましい効果は次のとおりです: マウスをホバーするときに行全体を展開せず、TD 列を大きくするだけです
ディスカッション (解決策) に返信します
効果は次のとおりです。同じですが、何が違うのか明確に説明してください。
効果は同じようですが、違いがある場合は明確に説明してください。
上のものでは td 列だけが大きくなりましたが、私の場合は行全体、つまり TR も大きくなります
上のものも大きくなったので、先にコードを貼り付けておきます
上のコードも大きくなったので、先にコードを貼り付けます
上記以外は何も変更しません、選択したものが大きくなり、作成した行全体が大きくなります、
.table1 tbody tr .td1{border:1px #527298 solid;font-weight:bold;} /*鼠标悬浮边框加粗字体加粗*/
overflow:hidden;
これを追加して確認してください
固定幅を設定します
大きくなりすぎないようにするには、TD に 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11445a2772a6b6107b401db3c9b82c049c2 の幅と高さを設定して、どうしても大きくならないようにします。 overflow:hidden
あまり大きくならないようにするには、54bdf357c58b8a65c66d7c19c8e4d114 のように TD に 45a2772a6b6107b401db3c9b82c049c2 を追加します。いずれの場合も大きくして、overflow:hidden を追加します
いいえ
CSS コード
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 を使用しました