Сочетание :hover и :nth-child(n4+4)?

Я застрял и не могу найти решение моей текущей проблемы и надеялся получить некоторую помощь и / или направление.

Мне было интересно, есть ли способ объединить псевдоклассы :hover и :nth-child(4n+4). Если вы посетите страницу моей песочницы, вы увидите неупорядоченный список (сделка polaroids ), где у меня каждый 4-й элемент списка отображает нулевое поле. Проблема в том, что :hover добавляет отступ в 10 пикселей, который прерывает поток для каждого 4-го элемента списка. Кажется, я не могу понять, как предотвратить мерцание, вызванное наведением курсора на эти элементы списка. Я безрезультатно пытался комбинировать вещи и использовать «! важно» (которого я стараюсь избегать). Кто-нибудь может помочь? Я что-то упускаю из виду, и вторая пара глаз не помешала бы.

вот 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>

css css-selectors pseudo-class
person BrownFreelance    schedule 27.06.2012    source источник
comment
Связанный? Проверьте принятый ответ: stackoverflow.com/questions/493232/multiple-css- псевдоклассы   -  person TheZ    schedule 28.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

Просто измените правое поле на -10px, не нужно ничего важного:

ul#myTiks li:nth-child(4n+4) {
    margin-right: -10px;
}
person thebiffboff    schedule 27.06.2012
comment
Ха, не беспокойтесь, я очень сомневаюсь, что вы умственно отсталые, вы, вероятно, просто слишком долго смотрели на это :) - person thebiffboff; 28.06.2012