Jump to content

How to change two different elements with a single :hover


LightPawa
 Share

Recommended Posts

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.

 

webhoverproblem.thumb.png.a245f51f3f0f8e9a3f595416a9cf8532.png

 

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 by LightPawa
I found a way to do it
Link to comment
Share on other sites

  • 2 weeks later...

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 by shaili_shah
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...