我陷入困境,无法找到解决当前问题的方法,希望得到一些帮助和/或指导。
我想知道是否有办法合并:hover和:nth-child(4n + 4)伪类。如果您访问my sandbox page,则会出现一个无序列表(交易伪指标),其中每个第4个列表项都显示零边距。问题是:hover添加了10px填充,打破了每个第4个列表项的流量。我似乎无法弄清楚如何防止因悬停在这些列表项上而引起的闪烁。我尝试将事情结合起来无效并使用“!important”(我试着避免)。有人可以帮忙吗?我忽略了什么,第二双眼睛会有所帮助。
这是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>
答案 0 :(得分:0)
只需将您的右边距更改为-10px
,无需重要:
ul#myTiks li:nth-child(4n+4) {
margin-right: -10px;
}