<div class="tips_tab" onclick="location.href="tips?query=7";">
        <img class="code_img<?=$nowUri=="/tips?query=7" ? "a":"";?>" src="../../images/tips7.png">
        <div class="code_title<?=$nowUri=="/tips?query=7" ? "a":"";?>"></div>
      </div>

.code_img{
  height: 50px;
  -webkit-filter: grayscale(100%);
  filter: gray;
    transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
.code_title{
  font-size: 13px;
  margin-top: 10px;
  color:-sharp999;
    transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
.tips_tab{
  display: inline-block;
  margin: 0 20px;
  cursor: pointer;
}
.code_img:hover{
  -webkit-filter: grayscale(0%);
}
.code_title:hover{
  color:-sharp262626;
}

.code_imga{
  height: 50px;
}
.code_titlea{
  font-size: 13px;
  margin-top: 10px;
  color:-sharp262626;
}

A problem encountered now is
because my code_img and code_title effects are separate.
moving to code_img black and white will change 0
to code_title color will change from 999 to 262626
, but this will become a separate effect.
I want him to move to the tips_tab area so that the hover of
code_img and code_title can see the synchronization.
how can it be implemented?