:hover doesn't work in Firefox

Question

Hope someone can help me with this problem.

:hover doesn't work in Firefox. In Google Chrome, Safari, IE works great. In IE the animation doesn't work but it doesn't meatier, works at least. I know how to solve it with jquery it's not a solution.

thank you

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

It doesn't work for me, the inspect element just changes it to 1 again when I reopen it. The actual hover code is working, its effects just being masked by the images. If you go down the bottom where there is only 1 picture you will see the text appear. — Dolchio, Jul 14 '13 at 21:18
After some more tweaking I think I've found a partial answer. If you remove the `position:absolute` from the css you should be able to see the text appear beside the images. However, some of the images go missing when you scroll up and down. — Dolchio, Jul 14 '13 at 21:21
it doesn't work for me opacity:1:0 i changed the display value from inline-block to inline-table.. Now i can see only the last div over the first photo. O.o — mALEFACTOr, Jul 14 '13 at 21:42

score 1 · Accepted Answer · answered Jul 15 '13 at 04:10

Your problem is that your <div class="over"> all end up stacked on top of each other in Firefox. At first glance, that's in fact the rendering called for in the spec (to the extent that the spec calls for any specific rendering for auto-offset absolutely positioned divs), so I'm not sure why other browsers are doing something different. But the spec leaves behavior here mostly undefined.

I recommend giving those divs non-auto offsets (specifically, set left on them to 0, 25%, 50%, 75%) so they'll actually be where you want them to be reliably and not rely on behavior the CSS specs explicitly don't define.

:hover doesn't work in Firefox

1 Answers1