为什么 CSS 子元素大于父元素（可排序）？

Question

我有一个带有多个 LI 的 UL。 在这些里有表格（每里1个）。

我使用 mootools 使我的 li 可拖动/可排序。 不过，我将把 JavaScript 放在外面，因为它不是问题的一部分。

一切都很好，除了我不希望我的整个 li （以及子表）是可拖动的。可以说只是一小部分。

然后我尝试“相对和绝对”摆脱这个问题，但是 li 的“悬停”效果仍然存在......所以当我悬停我的（子）表时，（父）li 总是显示它的: 悬停效果。这是不应该的！

<ul>
  <li>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>...</td>
        <td><a href="foobar.html">foobar</a></td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </li>
</ul>

<style>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
  }
  
  li {
    background-color: red;
    width: 25px;
    height: 25px;
    float: left;
    clear: both;
  }
  
  li:hover {
    background-color: green;
    cursor: move;
  }
  
  li table {
    border: 1px solid #eee;
    width: 850px;
    position: absolute;
  }
</style>

如果你应用这个，你会看到实际的 li 是 25x25。但是当你将鼠标悬停在桌子上时，li 变成绿色（只是那个 25x25 部分）......

只有 25x25 的部分应该响应悬停！

Answer 1

问题在于您的标记。 您在列表项 (li) （的兄弟）中有表格，因此您应用于 li 的任何效果/样式都将应用于其中的所有内容；因此，为什么当您将鼠标悬停在桌子上时，li 会变成绿色。

Answer 2

当您将鼠标悬停在table（li 的子代）上时，您也会触发:hover 伪类li。

一种解决方案可能是将一个类应用于所有 li，其中包含一个表：

<li class="withTable">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>...</td>
            <td><a href="foobar.html">foobar</a></td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>
</li>

将此规则添加到您的 CSS 中：

li.withTable:hover {
        background-color:transparent;
        cursor:default;
}

显然你可以根据需要设置另一种颜色

li.withTable:hover {
        background-color:blue;
        cursor:default;
}