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

【问题标题】：CSS hover 2 another elements (and another atributes)CSS 悬停 2 个其他元素（和其他属性）
【发布时间】：2013-07-05 03:40:25
【问题描述】：

我有链接<a></a>，在这个链接中我有画布和普通文本。两个元素都将不透明度（超过 rgba()）设置为 50% 的可见性。通过悬停此链接，我想通过两个元素将可见性属性更改为 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>

【问题讨论】：

因此，对所有共享更改使用一个选择器，对特定于一个元素的更改使用一个单独的特定选择器。
这不是解决方案。因为如果您只悬停文本，我将无法在画布上获得该背景。这就是我要问的。如果有办法选择该画布背景颜色。像 canvas_table_item.background-color:..... 但我想我只能用 javascript 来做到这一点

标签： javascript css canvas hyperlink hover

【解决方案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); }

【讨论】：

这正是我所需要的和我所拥有的......我很奇怪，为什么在我的代码中它不起作用......好吧，没关系。感谢您的回复，标记为答案并在我这边搜索问题。谢谢
啊！是一个解决方案！它需要在链接内的文本周围添加 ..
当然！当您需要向标记添加文本时，请始终添加 span 元素。

【解决方案2】：

这里有另一个question 有答案。

试试这个：

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

【讨论】：

您可以使用 CSS 执行此操作，实际上不需要 javascript