CSS 상위 (정렬 가능)보다 큰 하위 요소

Question

여러 개의 LI가있는 UL이 있습니다. 이 li에는 테이블이 있습니다 (모든 li에 1 개).

나는 mootools를 사용하여 나의 li을 드래그 가능/정렬 가능하게 만듭니다. 문제의 일부가 아니기 때문에 여기에서 자바 스크립트를 빠져 나갈 것입니다.

나는 전체 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; 
     } 

이를 적용하는 경우, 당신은 실제 리는 25x25 것을 볼 수 있습니다. 그러나 테이블을 가져 가면 리가 녹색으로 바뀝니다 (단지 25x25 부분) ...

그 호버에만 반응해야합니다!

Answer 1

문제는 마크 업에 있습니다. 목록 항목 (li)의 형제 (들) 내에 테이블이 있으므로 li에 적용하는 효과/스타일이 적용되는 모든 내용이 그 안에있는 모든 항목에 적용됩니다. 그러므로 왜 테이블 위로 마우스를 가져 가면 리가 초록색이됩니다.

Answer 2

li의 자식 인 table 위로 마우스를 가져 가면 li에 대해서도 :hover 가상 클래스를 트리거합니다.

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