【至急】cssのコーディングについて。
tr要素の中にtd要素が二つあります。
その二つのtd要素にそれぞれa要素が設定されてます。
このa要素にはマウスでホバーした際にテキストの色がそれぞれ違う色に変わるように設定したいのですが、二つのa要素のうち一方にホバーするともう一方のa要素のテキスト色も同時に変わるという動きにしたいです。
これって可能ですか?
+や~を用いたりしてみたのですが、一向に変化がありません。しかも、idやclass名をつけすぎたせいでごちゃごちゃになってしまいました。とりあえず出来るかどうか知りたいです。よろしくお願いいたします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
aira10 さん
・・・・二つのa要素のうち一方にホバーするともう一方のa要素のテキスト色も同時に変わる・・・・・・・
例えばこんな感じですか↓
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.aa:hover+td>a {color:red;}
.aa:hover>a {color:lime;}
.bb:hover td:first-of-type a{color:#dd0;}
.bb:hover td:last-of-type a{color:#0dd;}
</style>
</head>
<body>
<table border=1>
<tr>
<td colspan=2>11にホーバーしたとき<br>12から11操作はcssでは無理</td>
</tr>
<tr>
<td class="aa"><a href="#">11</a></td><td><a href="#">12</a></td>
</tr>
<tr>
<td colspan=2>21 又は 22にホーバーしたとき</td>
</tr>
<tr class="bb">
<td><a href="#">21</a></td><td><a href="#">22</a></td>
</tr>
<tr>
<td colspan=2>*cssで前方操作は出来ない</td>
</tr>
</table>
</body>
</html>
No.3
- 回答日時:
こんばんは
セレクタの結合子では後方の要素を指定することは可能ですが、前方に遡った指定はできないので、少し小細工が必要そうです。
※ いずれにしろ、a要素には :link、:hover、:active の設定がデフォルトでされていると思いますので、そちらとの調整を行う必要があるかもしれません。
◇方法1
trのhoverでも事足りるなら、こちらの方法が簡単です。
td内にa要素以外にも存在している場合に、その要素へのhoverでも反応してしまいますが・・
CSS
.hoge:hover td a { color: maroon; }
.hoge:hover td + td a { color: red; }
HTML
<table>
<tr class="hoge">
<td><a href="#">test1-1</a></td>
<td><a href="#">test1-2</a></td>
</tr>
<tr>
<td><a href="#">test2-1</a></td>
<td><a href="#">test2-2</a></td>
</tr>
</table>
◇方法2
hover対象部分にlabelを用いて、非表示にしたcheckboxを利用する仕組みです。
こちらであれば、a要素内のhoverだけに限定することも可能です。
CSS
#ch1 { display: none; }
#ch1:hover ~ * td label[for="ch1"] { color : maroon; }
#ch1:hover ~ * td + td label[for="ch1"] { color : red; }
HTML
<input id="ch1" type="checkbox" />
<table>
<tr>
<td><a href="#"><label for="ch1">test1-1</label></a></td>
<td><a href="#"><label for="ch1">test1-2</label></a></td>
</tr>
<tr>
<td><a href="#">test2-1</a></td>
<td><a href="#">test2-2</a></td>
</tr>
</table>
No.2
- 回答日時:
可能です。
以下は1例<table>
<tr class="wrap">
<td><a class="a1" href="・・・">リンク1</a></td>
<td><a class="a2" href="・・・">リンク2</a></td>
</tr>
</table>
cssは
.wrap :hover .a1 {color: #f00;}
.wrap :hover .a2 {color: #0f0;}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- Visual Basic(VBA) Selenium Basicの件 5 2023/04/10 20:55
- 化学 【危険物乙四】の問題で、「同類、同品名、同指定数量の危険物の変更は届け出は不要である」と書かれていて 1 2022/07/17 09:42
- 子供 男性に必要で女性に不要なモノ(才能・能力・身体的機能など)は何だと思いますか? 3 2022/06/21 17:07
- 環境学・エコロジー メタンガスと炭酸ガスを反応させ、炭と水を取り出すことは可能ですか? 1 2022/08/26 01:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
smallにtext-allignが効かない
-
NからZへの全単射を具体的に構...
-
emとstrongの反対
-
親要素・子要素
-
【ヒトの神秘】美男美女から何...
-
imgタグをそのまま使うことは正...
-
含む含まないという概念自体の...
-
CSSのセレクタに指定するbodyと...
-
input type="hidden"で取得した...
-
HTMLで <p>~</p>内で2回以...
-
html タグの閉じスラッシュ前の...
-
CSSでjavascriptが中央寄せにな...
-
aの中にspan
-
質問1.
-
タグは大文字と小文字どちらが...
-
textareaの幅を画面と合わせたい
-
figcaption要素の中にul要素
-
vb/vb.net XMLの大量データの作...
-
CSSセレクタの子孫要素について...
-
初歩的な質問です。<div>のwidt...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
質問1.
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
マージソートの計算量について-...
-
親要素・子要素
-
border: noneでボタンの境界線...
-
C言語 並び替え(配列)について
-
tdに対してmin-heightの定義、...
-
HTMLでTextareaを横に2つ並べ...
-
テキストボックスの中にリンク...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
ある要素の中身を全部グレーア...
おすすめ情報