I'm stuck and can't figure out a fix to my current problem and was hoping to get some help and/or direction.
I was wondering if there is a way to combine the :hover and :nth-child(4n+4) pseudo classes. If you visit my sandbox page there is an un-ordered list (the deal polaroids) where I have every 4th list item display a zero margin. The problem is that the :hover adds a 10px padding that breaks the flow on every 4th list item. I can't seem to figure out how to prevent the flicker that is caused by hovering over those list items. I tried combining things to no avail and using "!important" (which I try and avoid). Can anyone help? I that I'm overlooking something and a second pair of eyes would help.
here is the CSS/HTML:
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>
Just change your right margin to -10px
, no need for important:
ul#myTiks li:nth-child(4n+4) {
margin-right: -10px;
}