テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。
しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像
(背景として設定しているもの)が微妙に1pxほど斜め下にずれて表示されてしまいます。
このような事を防ぐためにはどんな事に気を付ければ良いでしょうか?
ちなみに、ロールオーバー前の画像とロールオーバー後の画像2枚を
全く同じサイズにしています。
参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。
-------------------------------------------------CSS
td.1{
background:url(image01.jpg) no-repeat;
}
td.1 a{
display:block;
}
td.1 a:hover{
background-color:transparent;
}
td.1 a:hover img{
visibility:hidden;
}
-------------------------------------------------HTML
<table>
<tr>
<td class="1"> ←このtd内の画像
<a href="top.html"><img src="image01.jpg"></a>
</td>
<td>
<a href="top02.html"><img src="image02.jpg"></a>
</td>
<td>
<a href="top03.html"><img src="image03.jpg"></a>
</td>
</tr>
</table>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
HTML <td></td>タグ セル内余...
-
テーブルの行の高さを指定する...
-
テーブルの行を折りたたみたい...
-
文字列が入っているtdを削除せ...
-
テーブルの外側の線を消す
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
テーブル入れ子した時の、テー...
-
テーブルの任意の列を非表示に...
-
テーブルタグのセルの幅の一部...
-
html・cssで日付をキレイに揃え...
-
テーブルの位置
-
tableにul,または,olを入れられ...
-
EXCELからhtmlへの変換で罫線が...
-
HTMLで外部ファイルの読み込み
-
width指定したTDでwhite-space:...
-
テーブル(表)を2つ横に並べて...
-
テーブルの表示がずれます
-
HTMLでアンケートの作り方を教...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルのヘッダとボディの幅...
-
テーブルの行の高さを指定する...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
HTML <td></td>タグ セル内余...
-
ホームページ 表の上の余白を...
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
テーブルの上に空行が入る・・...
-
テーブルタグのセルの幅の一部...
-
表の1列だけをCSSを使って右揃...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
HTMLのテーブルで桁をそろ...
-
テーブルのセルにアンカー
おすすめ情報