初心者の方は助けてください。_html/css_WEB-ITnose-htmlチュートリアル-php.cn

初心者の方は助けてください。_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:08:36

オリジナル

1019 人が閲覧しました

以下に示すような効果を実現したいです。

これは私が作成したスタイルです。問題は、マウスを td の上に置くと行全体が拡大されることですが、上記のものは問題ありません (上記他の人が書いたものです)
私望ましい効果は次のとおりです: マウスをホバーするときに行全体を展開せず、TD 列を大きくするだけです

ディスカッション (解決策) に返信します

効果は次のとおりです。同じですが、何が違うのか明確に説明してください。

効果は同じようですが、違いがある場合は明確に説明してください。
上のものでは td 列だけが大きくなりましたが、私の場合は行全体、つまり TR も大きくなります

上のものも大きくなったので、先にコードを貼り付けておきます

上のコードも大きくなったので、先にコードを貼り付けます
上記以外は何も変更しません、選択したものが大きくなり、作成した行全体が大きくなります、

.table1 tbody tr .td1{border:1px #527298 solid;font-weight:bold;}  /*鼠标悬浮边框加粗字体加粗*/

ログイン後にコピー

overflow:hidden;

ログイン後にコピー

これを追加して確認してください

固定幅を設定します

大きくなりすぎないようにするには、TD にの幅と高さを設定して、どうしても大きくならないようにします。 overflow:hidden

あまり大きくならないようにするには、のように TD にを追加します。いずれの場合も大きくして、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 を使用しました

ブラウザごとに、の背景画像を使用できます。問題を解く。