javascript - CSS 悬停 2 个其他元素(和其他属性)

Question

我有链接<a></a>在此链接中，我有 Canvas 和普通文本。这两个元素都将不透明度(通过 rgba())设置为 50% 的可见性。将鼠标悬停在这个链接上，我想通过两个元素将可见性属性更改为 100%。

问题是:在 Canvas 中我需要改变背景颜色。有了链接内的文字，我需要改变颜色。链接看起来像:

<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);
}

它也改变文本(链接)的背景颜色..我只需要在 Canvas 上更改背景颜色和文本颜色(也可以在 Canvas 上更改)。有什么方法可以只用 CSS 实现吗？还是我真的需要使用 javascript？

在这里回答:DEMO
解决方案是添加并在此链接文本中，如下所示:

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

Answer 1

这就是你想要的？ DEMO

只需添加这些 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); }