I have DIV, where is table with one tr and two th, in one TH is photo and in second is Paragraph.
When I brind my mouse on DIV, it changes his color and when I brind my mouse on Paragraph, it changes his color too.
But I want to do it simultaneously not seperated.

Code:

<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>

CSS

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

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

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