0

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

在这里回答：添加了演示
解决方案，并在此链接文本中，如下所示：

<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 回答