dポイントプレゼントキャンペーン実施中！

パニック

【至急】cssのコーディングについて。 tr要素の中にtd要素が二つあります。 その二つのtd要素に

締切済

  • 質問者：aira10
  • 質問日時：
  • 回答数：4件

【至急】cssのコーディングについて。
tr要素の中にtd要素が二つあります。
その二つのtd要素にそれぞれa要素が設定されてます。

このa要素にはマウスでホバーした際にテキストの色がそれぞれ違う色に変わるように設定したいのですが、二つのa要素のうち一方にホバーするともう一方のa要素のテキスト色も同時に変わるという動きにしたいです。
これって可能ですか？

+や~を用いたりしてみたのですが、一向に変化がありません。しかも、idやclass名をつけすぎたせいでごちゃごちゃになってしまいました。とりあえず出来るかどうか知りたいです。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： gura_
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

こんばんは



セレクタの結合子では後方の要素を指定することは可能ですが、前方に遡った指定はできないので、少し小細工が必要そうです。

※ いずれにしろ、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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： t_fumiaki
  • 回答日時：

可能です。

以下は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;}
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： bx2
  • 回答日時：

pointer-events を使って実現可能です。

    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報