: hover не работает в Firefox

Надеюсь, кто-то может помочь мне с этой проблемой.: hover не работает в Firefox

: зависание в Firefox не работает. В Google Chrome, Safari, IE работает отлично. В IE анимация не работает, но она не мясистая, работает как минимум. Я знаю, как решить проблему с jquery, это не решение.

спасибо

HTML:

 <article> 
     <div class="over"> 
      <span class="text"> 
      <h3></h3> 
      </span> 
     </div> 
     <div></div> 

     <div class="over"> 
      <span class="text"> 
      <h3></h3> 
      </span> 
     </div> 
     <div></div> 

     <div class="over"> 
      <span class="text"> 
      <h3></h3> 
      </span> 
     </div> 
     <div></div> 

     <div class="over"> 
      <span class="text"> 
      <h3></h3> 
      </span> 
     </div> 
     <div></div> 
    </article>

CSS:

article > div.over { 
    width: 25%; 
    height: 100%; 
    display: inline-block; 
    float: left; 
    position: absolute; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    background: rgba(55,55,55,0.6); 
    color: #FFF; 
    opacity: 0; 
    z-index: 1000; 
} 
article > div.over:hover { 
    transition: all 1s ease-out; 
    -webkit-transition: all 1s ease-out; 
    -moz-transition: all 1s ease-out; 
    -o-transition: all 1s ease-out; 
    opacity: 1; 
}

Preview: http://reveofficial.com/fashion.php

источник

2013-07-14 mALEFACTOr

использование 'opacity: 1.0' в hover, работает для меня –

Это не работает для меня, элемент проверки просто меняет его на 1 снова, когда я его снова открываю. Фактический код наведения работает, его эффекты просто маскируются изображениями. Если вы спуститесь вниз, где будет только 1 фотография, вы увидите, что текст появится. – Dolchio

После некоторой настройки, я думаю, что нашел частичный ответ. Если вы удаляете «position: absolute» из css, вы должны видеть, что текст появляется рядом с изображениями. Однако некоторые изображения исчезают при прокрутке вверх и вниз. – Dolchio

Ваша проблема в том, что ваш <div class="over"> все в конечном итоге укладываются друг на друга в Firefox. На первый взгляд, это на самом деле рендеринг, который требуется в спецификации (в той мере, в какой спецификация требует какого-либо конкретного рендеринга для автоматического позиционирования абсолютно позиционированных div), поэтому я не уверен, почему другие браузеры делают что-то другое. Но спецификация оставляет поведение здесь в основном неопределенным.

Я рекомендую давать эти дивы без автоматического смещения (в частности, установить left на них 0, 25%, 50%, 75%), поэтому они на самом деле будут там, где вы хотите, чтобы они были надежно и не полагаться на поведении CSS спецификации явно не определяют.

источник

2013-07-15 04:10:08

: hover не работает в Firefox

ответ

Смежные вопросы