Question

我有几个LI的UL。在这些li中有表格（每个li中有1个）。

我使用mootools使我的李可拖动/可排序。我会把javascript留在这里，因为它不是问题的一部分。

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

然后我尝试了“相对和绝对”我的出路，但是李的“悬停”效果仍然存在......所以当我悬停我的（孩子）牌桌时，（父母）李总是表现出来：悬停效果。它不应该!!

HTML：

<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>

CSS：

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

如果你应用这个，你会发现实际的li是25x25。但是当你把桌子悬停时，li会变成绿色（只有25x25部分）......

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

Answer 1

问题在于你的标记。您拥有列表项目（li）中的（兄弟）表格，因此您应用于li的任何效果/样式将适用于其中的所有内容;因此当你将鼠标悬停在桌子上时，李正在变绿。

Answer 2

当您将鼠标悬停在table（{1}}的孩子身上时，您也会为li触发:hover伪类。

一个解决方案可能是将一个类应用于所有li里面的表：

li

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

<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>

显然，如果你想要

，你可以设置另一种颜色

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

CSS子元素大于父元素（sortables）

2 个答案: