1

我被困住了，无法解决我当前的问题，希望能得到一些帮助和/或指导。

我想知道是否有一种方法可以结合 :hover 和 :nth-child(4n+4) 伪类。如果您访问我的沙盒页面，则会有一个无序列表（交易宝丽来），其中我让每个第 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>
4

1 回答 1

0

Just change your right margin to -10px, no need for important:

ul#myTiks li:nth-child(4n+4) {
    margin-right: -10px;
}
于 2012-06-27T23:21:04.623 回答