Question

我有链接<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？

此处回答：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); }

Answer 2

这是另一个有question的答案。

试试这个：

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

CSS悬停2个其他元素（和其他属性）

2 个答案: