I have a div element, containing a table with one tr and two th. In the first th is an image and in the second a paragraph.
When I hover over the div, its color changes and when I hover over the paragraph, its color changes too.
But I want them to change simultaneously when I hover over either one of them.

Code:

/* DIV */
.about_us_table{
    box-shadow: 0px 0px 15px rgba(245, 244, 244, 0.8);
    margin: 0px auto;
    background-color: rgba(245, 244, 244, 1);
    width: 95%;
    border: 1px solid black;
    border-radius: 10px;
    transition: all 0.7s ease 0s;
}

.about_us_table:hover{
    box-shadow: 0px 0px 30px rgba(139, 0, 0, 0.8);
    margin: 0px auto;
    background-color: rgba(139, 0, 0, 0.8);
    width: 95%;
    border: 1px solid;
    border-radius: 10px;
}

/* PARAGRAPH */
#about_us_table_p{
    color: rgba(0, 0, 0, 1);
    font-size: 23px;
    transition: all 0.7s ease 0s;
}

#about_us_table_p:hover{
    color: rgba(245, 244, 244, 0.8);
}

<div >
  <table border="0px" cellspacing="15px">
    <tr>
      <th align="left" style="width: 50%;">
        <img src="./img/table_1.png" width="90%" height="100%" id="table_img_1">
      </th>
      <th align="left">
        <p id="about_us_table_p">
          text
        </p>
      </th>
    </tr>
  </table>
</div>

CodePudding user response：

you need to change the selector for the css rule like this:

.about_us_table:hover #about_us_table_p

.about_us_table{
    box-shadow: 0px 0px 15px rgba(245, 244, 244, 0.8);
    margin: 0px auto;
    background-color: rgba(245, 244, 244, 1);
    width: 95%;
    border: 1px solid black;
    border-radius: 10px;
    transition: all 0.7s ease 0s;
}

.about_us_table:hover{
    box-shadow: 0px 0px 30px rgba(139, 0, 0, 0.8);
    margin: 0px auto;
    background-color: rgba(139, 0, 0, 0.8);
    width: 95%;
    border: 1px solid;
    border-radius: 10px;
}

#about_us_table_p{
    color: rgba(0, 0, 0, 1);
    font-size: 23px;
    transition: all 0.7s ease 0s;
}

.about_us_table:hover #about_us_table_p{
    color: rgba(245, 244, 244, 0.8);
}

<div >
  <table border="0px" cellspacing="15px">
    <tr>
      <th align="left" style="width: 50%;">
          <img src="./img/table_1.png" width="90%" height="100%" id="table_img_1">
      </th>
      <th align="left">
          <p id="about_us_table_p">
              text
          </p>
      </th>
    </tr>
  </table>
</div>

CodePudding user response：

Just add this code:

.about_us_table:hover  #about_us_table_p{
    color: rgba(245, 244, 244, 0.8);
}

this command help you