CSS hover 2 another elements (and another atributes)

Question

I have link <a></a> and inside this link i have canvas and normal text. Both elements have setted opacity (over rgba()) on 50% visibility. With hovering this link i would like to change visibility property on 100% by both elements.

Problem is: in canvas i need to change background-color. With that text inside link i need change color. link looks like:

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

if i put both in 1 selector:

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

it change the background color of the text (link) as well.. I need change background-color ONLY on the canvas and color on the text (it can be changed on canvas as well). Is there way how to achieve that only with CSS or do i realy need to use javascript?

ANSWER IN HERE: DEMO
SOLUTION IS ADD AND INSIDE THIS THE LINK TEXT LIKE IN HERE:

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

So use one selector for all the shared changes, and a separate, specific selector, for changes specific to one element. — David Thomas, Jul 07 '13 at 20:15
this is not solution. because if you hover only the text i am not able to get that background on the canvas. And that is what i am asking about. If there is way how to select that canvas background color. something like canvas_table_item.background-color:..... but i think i will be able do that only with javascript — tomdelahaba, Jul 07 '13 at 20:17

score 1 · Accepted Answer · answered Jul 07 '13 at 20:18

1

This is what you want? DEMO

Just add these CSS rules:

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

answered Jul 07 '13 at 20:18

leoMestizo

1,469
9
15

that is exactly what i need and what i had..i am wonder, why in my code it doesnt work..Ok, nevermind. Thanks for reply, marking as answer and going to search the problem on my side. Thanks – tomdelahaba Jul 07 '13 at 20:22
1

AH! the was a solution!! it need to add the around the text inside link.. – tomdelahaba Jul 07 '13 at 20:27
Sure! Always when you need to add text to your markup, add the `span` element. – leoMestizo Jul 07 '13 at 20:28

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

Here's another question that have the answer.

Try this:

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

edited May 23 '17 at 12:29

Community

1
1

answered Jul 07 '13 at 20:18

Joe

50
7

You can perform this with CSS, javascript isn't really needed – Joe Jul 07 '13 at 20:19

CSS hover 2 another elements (and another atributes)

2 Answers2