결합 : 호버와 : n 번째 자녀 (n4 + 4)?

Question

나는 갇혀있어 내 현재 문제에 대한 해결책을 찾지 못해 도움이나 방향을 찾고 싶어했다.

: hover 및 : nth-child (4n + 4) 의사 클래스를 결합하는 방법이 있는지 궁금합니다. my sandbox page을 방문하면 모든 네 번째 목록 항목에 0 마진이 표시되는 주문되지 않은 목록 (거래 폴라로이드)이 있습니다. 문제는 : hover가 네 번째 목록 항목마다 흐름을 중단시키는 10px 패딩을 추가한다는 것입니다. 목록 항목 위로 마우스를 가져 가면 깜박임이 발생하는 것을 방지하는 방법을 알 수 없습니다. 나는 소용이없는 것을 결합하고 "! important"(나는 이것을 시도하고 피한다)를 사용하여 시도했다. 누구든지 도와 줄 수 있습니까? 나는 뭔가를 간과하고 두 번째 눈 쌍이 도움이 될 것입니다.

CSS :

ul#myTiks li { 
    float: left; 
    width: 230px; 
    display: block; 
    margin-right: 35px; 
    list-style-type: none; 
    margin-bottom: 35px; 
    color: #333; 
} 

ul#myTiks li:hover { 
    padding: 10px; 
    background-image: url(../img/dwt/white_bgd_30.png); 
    margin: -10px 25px 25px -10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
} 

ul#myTiks li:nth-child(4n+4) { 
    margin-right: 0 !important; 
} 

HTML :

<li> 
<div class="polaroid"> 
      <div class="title">Title Of Deal</div> 
      <div class="category">Deal Category</div> 
      <div class="tik"><a href="#"></a></div> 
      <div class="img"><img src="../img/dwt/myTik_placeholder_img.png" width="197" height="197"></div> 
      <div class="soc" style="display:none;"> 
       <a href="#"><img src="../img/dwt/tweet_btn_x20h.png" width="55" height="20"></a> 
       <a href="#"><img src="../img/dwt/fb_like_btn_x20h.png" width="46" height="20"></a> 
       <a href="#"><img src="../img/dwt/pin_btn_x20h.png" width="55" height="20"></a> 
      </div> 
     </div> 
</li> 

Answer 1

그냥 변경하려면 오른쪽 여백 -10px에 중요한에 대한 필요 :

ul#myTiks li:nth-child(4n+4) { 
    margin-right: -10px; 
} 

여기

는 CSS/HTML입니다