LightPawa Posted October 28, 2020 Share Posted October 28, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
JMRKER Posted October 29, 2020 Share Posted October 29, 2020 Care to share your solution? Link to comment Share on other sites More sharing options...
shaili_shah Posted November 13, 2020 Share Posted November 13, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now