1

私は立ち往生しており、現在の問題の解決策を見つけることができず、助けや方向性を得ることを望んでいました.

:hover と :nth-child(4n+4) 疑似クラスを組み合わせる方法があるかどうか疑問に思っていました。私のサンドボックス ページにアクセスすると、順序付けされていないリスト (ディール ポラロイド) があり、4 番目のリスト アイテムごとにゼロ マージンが表示されます。問題は、:hover が 10px のパディングを追加して、4 つ目のリスト項目ごとにフローを中断することです。これらのリスト項目にカーソルを合わせると発生するちらつきを防ぐ方法がわかりません。私は物事を組み合わせて無駄にし、「!important」を使用しようとしました(私はこれを避けようとしています)。誰でも助けることができますか？私は何かを見落としており、2番目の目が助けになるでしょう。

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

右マージンを に変更するだけ-10pxで、重要な必要はありません:

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