0

リンクが<a></a>あり、このリンク内にキャンバスと通常のテキストがあります。両方の要素は、50% の可視性で (rgba() を介して) 不透明度を設定しています。このリンクをホバリングすると、両方の要素で可視性プロパティを 100% に変更したいと思います。

問題は、キャンバスで背景色を変更する必要があることです。リンク内のそのテキストで、色を変更する必要があります。リンクは次のようになります。

<a href="" class="table_link">
  <canvas class="canvas_table_item"></canvas>
  Chair
</a>

両方を1つのセレクターに入れると:

.content_table *:hover{
   color:rgba(255, 255, 255, 1);
   background-color:rgba(255, 255, 255, 1);
}

テキスト（リンク）の背景色も変更します..キャンバスでのみ背景色を変更し、テキストの色を変更する必要があります（キャンバスでも変更できます）。CSSだけでそれを達成する方法はありますか、それとも本当にjavascriptを使用する必要がありますか?

ここに答えてください:デモ
ソリューションは、ここにあるようなリンク テキストを追加してください:

<a href="" class="table_link">
  <canvas class="canvas_table_item"></canvas>
  <span>
     Chair
  </span>
</a>
4

2 に答える 2

1

これはあなたが望むものですか？デモ

次の CSS ルールを追加するだけです。

a.table_link {
    display: inline-block;
    border: 1px solid black;
}
a:hover > canvas {
    background-color:rgba(255, 255, 255, 1);
}

a:hover > * { color:rgba(255, 255, 255, 1); }
于 2013-07-07T20:18:25.433 に答える
1

ここに答えがある別の質問があります。

これを試して：

*:hover .content_table{ color:rgba(255, 255, 255, 1); background-color:rgba(255, 255, 255, 1); }

于 2013-07-07T20:18:26.243 に答える