Question

编辑：将输入的背景更改为透明修复了问题。

我有一张桌子，需要将行中输入框的背景颜色更改为与行相同的颜色。当我将鼠标悬停在该行上时，它会变为淡蓝色但输入框保持白色，除非您将鼠标悬停在输入框上方。如果将鼠标悬停在输入框上，颜色会发生变化，但如果将鼠标悬停在行的任何部分上，我也需要更改颜色。任何帮助表示赞赏。

.rowTable是所有行的类

HTML：

<td class="completedCalendar tableData"><input value="%dateCompleted%" class="datepicker picker_input" data-id="%todoID%" id="todo_completeddate" style="border:none" readonly="readonly"/></td>

CSS：

#main_todos_container .rowTable {
    border: solid;
    border-color: #f5f5f5;
    border-width: thin;
    font-size: 13px;
    border-left: 0;
    border-right: 0;
}

#main_todos_container .rowTable:hover .tableData {
    background-color: #f0f8fe;
}

 #main_todos_container .rowTable:hover > .completedCalendar {
    background-color: #f0f8fe;
}

Answer 1

这样的东西？我可以添加完全适合您的示例的代码，但这是一般的想法。红色是td，黄色是input。

td {
  background: red;
  width: 100px;
}

td:hover>input, td:hover {
  background: green;
}

input {
  width: 50px;
  background: yellow;
}

<table>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

Answer 2

如comments中所述，只需使用透明背景。

CSS

td {
    background: red;
}

td:hover {
    background: green;
}

input {
    background: transparent;
}

HTML

<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
</table>

将鼠标悬停在表格中的某一行上时，更改输入框的背景颜色？

2 个答案: