首页 文章

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

提问于
浏览 次
1

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

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

.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;
}
html css hover

2 回答

  • 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>
    回复于
  • 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>
    回复于

相关问题