实现表格整行:hover效果：悬停图片/文本时整行触发样式

问题说明 #

需要让表格行的:hover伪类作用于整行：鼠标悬停在图片或文本上时，图片与文本同步触发opacity: 100%的样式，但当前仅单个元素能触发对应hover效果。

解决方案 #

通过调整CSS选择器，把hover事件绑定到表格行(<tr>)上，当行被hover时，同时控制行内所有目标元素的样式。

修改后的CSS代码

/* 表格行基础样式 */
.linkFooter {
  opacity: 80%;
  color: white;
  vertical-align: top;
}

/* 表格行hover时，行内元素同步生效 */
.linkFooter:hover {
  opacity: 100%;
}
.linkFooter:hover .iconContentFooter {
  opacity: 100%;
}

/* 统一设置行内链接样式 */
.linkFooter a {
  color: white;
  text-decoration: none;
}

.iconContentFooter {
  width: 25px;
  height: 25px;
  padding-bottom: 10px;
  opacity: 80%; /* 给图片设置初始透明度，和文本保持一致 */
}

修改后的HTML代码

<table>
  <tr class="linkFooter">
    <td>
      <a href="tel:+972503303397">
        <img src="pics/phone.png" class="iconContentFooter">
      </a>
    </td>
    <td>
      <a href="tel:+972*********">
        <b>
               &nbsp;
               טלפון:
            </b> &nbsp; ***-***-****
      </a>
    </td>
  </tr>
  <tr class="linkFooter">
    <td>
      <a href="mailto:****@gmail.com">
        <img src="pics/mail.png" class="iconContentFooter">
      </a>
    </td>
    <td>
      <a href="mailto:lahavadam@gmail.com">
        <b>
               &nbsp;
               אימייל:
            </b> &nbsp; ****@gmail.com
      </a>
    </td>
  </tr>
</table>

核心调整点 #

• 给图片添加初始opacity: 80%，保证和文本初始视觉状态一致
• 使用.linkFooter:hover .iconContentFooter选择器，实现表格行hover时同步改变图片透明度
• 统一通过.linkFooter a控制行内链接样式，避免重复添加类名
• 现在无论鼠标悬停在行内的图片还是文本区域，整行元素都会同步触发hover效果

内容的提问来源于stack exchange，提问作者Daniel