2

我有一个带有几个 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 的部分应该响应悬停！

4

2 回答 2

0

当您将鼠标悬停在 的table子级上时，您也会li触发.:hoverli

一个解决方案可能是将一个类应用于所有 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;
}
于 2012-07-05T11:08:38.293 回答
0

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

于 2012-07-05T10:51:46.170 回答