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

【问题标题】：Change background color of input box when you hover over a row in a table?将鼠标悬停在表格中的一行上时更改输入框的背景颜色？
【发布时间】：2018-07-17 01:13:10
【问题描述】：

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

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

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

【问题讨论】：

您是否尝试仅使用 CSS 来执行此操作？还是您使用的是 javascript 或 JQuery？
@RyanWilson 我正在使用 javascript 和 jquery，但如果可能只使用 CSS，我只想使用 CSS
您的输入具有 datepicker.picker_input 类，尝试用 #main_todos_container .rowTable:hover > .datepicker.picker_input { background-color: #f0f8fe; }
也许这个问题会有所帮助：stackoverflow.com/questions/6910049/…
你不能把输入的背景设置为透明吗？

标签： html css hover

【解决方案1】：

正如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】：

这样的？我可以添加完全适合您的示例的代码，但这是一般的想法。红色是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>

【讨论】：