div-box мерцает при недостатке css

0

Я пытаюсь сделать эффект hover image-zoom холсте в базовой галерее HTML с помощью стилей CSS-3. Каждый пятый ящик всегда мерцает над мышью. Может кто-нибудь помочь указать, где код ошибки... Спасибо заранее.

CSS:

body {
    margin-top: 100px;
    margin-bottom: 100px;
}
#container {
    width:738px;
    height:600px;
    margin: 0 auto;
}

#ex2 img{
    height: 88px;
    width: 120px;
    margin: 0 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#ex2 img:hover {
    height: 189px;
    width: 258px;
    margin-left: 0px;
}

HTML:

<div id="container">
    <div id="containerEx2">
        <div id="ex2">
            <img src="images2/dm1_large.jpg"/>
            <img src="images2/dm2_large.jpg"/>
            <img src="images2/dm3_large.jpg"/>
            <img src="images2/dm4_large.jpg"/>
            <img src="images2/dm5_large.jpg"/>
            <img src="images2/dm6_large.jpg"/>
            <img src="images2/dm7_large.jpg"/>
            <img src="images2/dm1_large.jpg"/>
            <img src="images2/dm2_large.jpg"/>
            <img src="images2/dm3_large.jpg"/>
        </div>
    </div>
</div>
  • 0
    Вы имеете в виду прыжок вниз по линии, когда одно из изображений в строке становится достаточно большим?
  • 0
    Вы можете добавить в свой пост, что это происходит в Firefox (используйте ссылку редактирования) ...
Показать ещё 4 комментария
Теги:

3 ответа

0
Лучший ответ

Я предлагаю вам разделить изображения на 2 строки, все остальные ответы приводят к некоторым неприятностям с мерцанием в firefox. Вам все равно нужно увеличить ширину контейнера, но шестое изображение не будет вскакивать вверх, если у вас есть 2 строки. Я также превратил id группирующий ваши изображения в classes для удобства использования в вашем css:

HTML:

<div id="container">
    <div id="containerEx2">
        <div class="ex2"> <!-- 'id' has become a 'class' -->
            <img src="images2/dm1_large.jpg" />
            <img src="images2/dm2_large.jpg" />
            <img src="images2/dm3_large.jpg" />
            <img src="images2/dm4_large.jpg" />
            <img src="images2/dm5_large.jpg" />
        </div>
        <div class="ex2"> <!-- 'id' has become a 'class' -->
            <img src="images2/dm6_large.jpg" />
            <img src="images2/dm7_large.jpg" />
            <img src="images2/dm1_large.jpg" />
            <img src="images2/dm2_large.jpg" />
            <img src="images2/dm3_large.jpg" />
        </div>
    </div>
</div>

CSS:

body {
    margin-top: 100px;
    margin-bottom: 100px;
}
#container {
    width:800px; /* ensuring 5th image remains on the 1st line */
    height:600px;
    margin: 0 auto;
}
.ex2 img { /* changed #ex2 (hash) to .ex2 (dot) */
    height: 88px;
    width: 120px;
    margin: 0 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
.ex2 img:hover { /* changed #ex2 (hash) to .ex2 (dot) */
    height: 189px;
    width: 258px;
    margin-left: 0px;
}

Скриншот демо: http://jsfiddle.net/N3nLq/2/

Поделиться
  • 0
    большое Вам спасибо. Ваше решение самое полезное! это работает точно в Firefox. (PS / я пытался избежать разбиения на строки для последующего добавления изображений из списка файлов без дополнительной обёртки div.) В любом случае, спасибо за хороший код :-)
  • 0
    рад, что смог помочь! ;)
0

Ваш ответ лежит на ширине вашего контейнера. Поскольку он должен вытолкнуть, он не может оставаться в одном ряду, поэтому он переместит его в следующую строку. Поскольку это активный элемент, который должен быть переключен, он будет мерцать, потому что элемент должен выйти из границ предложенного блока.

Я создал JSfiddle и сделал ваш контейнер на 100 пикселей больше, в результате чего он работал нормально.

    #container {

      width:838px;
        height:600px;
        margin: 0 auto;
    }

http://jsfiddle.net/895NY/

РЕДАКТИРОВАТЬ

Что касается мерцающей части, я понятия не имею. Я думаю, что это проблема firefox, потому что я тестировал ее в Chrome, и она не мерцает в моем браузере.

Поделиться
  • 0
    Это не проблема ОП. При наведении указателя мыши на 5-е изображение в строке появляется мерцание (по крайней мере, в Firefox).
  • 0
    @TylerH Я проверил его в Chrome, и он не мерцает. Может быть специфичен для Firefox?
Показать ещё 4 комментария
0

Проблема заключается в ширине контейнера, вам нужно увеличить ширину контейнера при наведении, незначительные изменения в CSS:

#container {
    -webkit-transition:all 1s ease;
     width:620px;
     height:600px;
     margin: 0 auto;
}
#container:hover {
    width:760px;
}

И вот FIDDLE

Поделиться
  • 0
    если вы наведете курсор мыши на одно из изображений 2-й строки, оно переместится на одно из них вверх по линии, наведя курсор на это изображение, и снова появится мерцание ...
  • 0
    @webeno Я исправил это и отредактировал ответ .. спасибо
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню