Question

我有一个数据占用两行的表，所以我在两行中设置了单行行为。例如hover。如果鼠标通过顶行进入，下面的CSS会突出显示两行，原因是：

table.table_form tbody tr.top:hover + tr

我需要反过来：

table.table_form tbody tr.bot:hover - tr

我该怎么做？

所以这是我的CSS：

table.table_form tbody tr.bot:hover,
table.table_form tbody tr.top:hover,
table.table_form tbody tr.top:hover + tr {
  background: lighten($secondary, 10%);
  cursor: pointer;
}

这个HTML

<tr class="top-row " id="top6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="top" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
        <th scope="col">
            <input class="table_input" type="text" value="SuperAdmin 1" data-orig="SuperAdmin 1">
        </th>
        <td>
            <input class="table_input" type="text" value="Australia" data-orig="Australia">
        </td>
        <td>
            <input class="table_input" type="text" value="Product" data-orig="Product">
        </td>
    </tr>
<tr class="bot-row bottom-border " id="bot6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="bot" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
        <td>
            <input class="table_input" type="text" value="marclocchi13+1@gmail.com" data-orig="marclocchi13+1@gmail.com">
        </td>
        <td>
            <input class="table_input" type="text" value="" data-orig="">
        </td>
        <td colspan="2">
            <input class="table_input" type="text" value="" data-orig="">
        </td>
    </tr>

Answer 1

之前没有兄弟CSS选择器。

但你可以简单地重新组织表格，以便输入＆＃34;行＆＃34;实际上是一个单独的td，因此，一个可以在块上突出显示的tr。

＆＃13;

input{
  width:100%;
}

＆＃13;

<table>
  <tr id="top6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="top" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
    <td>
      <input class="table_input" type="text" value="SuperAdmin 1" data-orig="SuperAdmin 1">
      <input class="table_input" type="text" value="marclocchi13+1@gmail.com" data-orig="marclocchi13+1@gmail.com">
    <td>
      <input class="table_input" type="text" value="Australia" data-orig="Australia">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
    <td>
      <input class="table_input" type="text" value="Product" data-orig="Product">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
  </tr>
  <tr id="top6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="top" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
    <td>
      <input class="table_input" type="text" value="SuperAdmin 1" data-orig="SuperAdmin 1">
      <input class="table_input" type="text" value="marclocchi13+1@gmail.com" data-orig="marclocchi13+1@gmail.com">
    <td>
      <input class="table_input" type="text" value="Australia" data-orig="Australia">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
    <td>
      <input class="table_input" type="text" value="Product" data-orig="Product">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
  </tr>
</table>

＆＃13;

Prev Row的CSS

1 个答案: