CSS儿童元素大于父母（可排序）

我有UL和几个LI的。在这些里面有表（每1里有1个）。CSS儿童元素大于父母（可排序）

我使用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; 
     }

如果应用此，你会看到实际的李是25×25。但是当你盘旋桌子时，李变成绿色（只是25x25的部分）...

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

来源

2012-07-05 user1503705

问题在于你的标记。你在列表项（li）的（同胞）中有表格，因此你应用于li的任何效果/样式都将适用于其中的所有内容;因此当你在桌子上盘旋时，李正在变绿。

来源

2012-07-05 10:51:46 Rhyso

我知道。然而，我不清楚为什么我可以改变它的尺寸，但不是它的悬停尺寸（可以这么说）......这似乎是一件奇怪的事 – user1503705 2012-07-05 12:22:18

当你将鼠标悬停在table，这是li一个孩子，你触发:hover伪类也为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-05 11:08:38 Elisa

我刚刚尝试了你的建议，但25x25父母仍然在悬停子表时变成绿色。当我按类而不是按类型调用li时，为什么事情会有不同的表现？我开始害怕，我想要的是不可能的;）。 – user1503705 2012-07-05 11:31:29

尝试设置'li.withTable：hover {background-color：red;}'就像这个[fiddle]（http://jsfiddle.net/zHNA9/） – Elisa 2012-07-05 12:44:28

由于[特异性]（http：// net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/） – Elisa 2012-07-05 12:53:26

CSS儿童元素大于父母（可排序）

回答

相关问题