How to change two different elements with a single :hover

[LightPawa]

Hi there!

The problem I have is: I want to change the background of two elements simultaneously with one :hover.

The image below shows an article from the main section. It has :hover{backgroundcolor=lightgrey} property set.

I nested a table inside it. As you can see I put a <th colspan="4"> with background-color: white (because I want the rest of the <th> to be lightblue).

I want the :hover from the article to also change the <th colspan="4"> to lightgrey even if I'm only hovering the article element.

Thank you.

Pd: I still only know HTML and CSS 😄 I'm very new to this I've just spent a few weeks on it

Edit: I just applied a transparent color to the background 😅 didn't know it was a choice.

 

 

main section article:hover{
	background-color: lightgrey;
}

main section article h2{
	margin-top: 0;
}

table{
	text-align: left;
	border-spacing: 1px;
}

th{
	background-color: lightblue;
	text-align: center;
	padding: 0.1rem 1rem;
}

th.table-heading{
	background-color: white;
}

tr:hover{
	background-color: grey;
}

td{
	padding-right: 1rem;
}

td.name{
	text-align: center;
}

 

Edited October 28, 2020 by LightPawa
I found a way to do it

[JMRKER]

Care to share your solution?

 

[shaili_shah]

Suppose i have a <div> tag with the class and inside of <div> there is table tag.

<div class="hover">
<table>
<tr>
<th colspan="4" class="heading">  ABCD </th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>

<tr class="article">
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
  <td>abc</td>
</tr>
</table>
</div>

And css :

.heading{
  background-color:white;
}

.article{
  background-color:lightblue;
}

.hover:hover .heading{
  background-color:lightgrey;
}
.hover:hover .article{
  background-color:lightgrey;
}

Refer the code : https://jsfiddle.net/f72zs8j5/

This will help you.

Thanks!

Edited November 13, 2020 by shaili_shah