：hover在Firefox中不起作用

Question

希望有人可以帮助我解决这个问题。

：hover在Firefox中不起作用。 在谷歌浏览器，Safari和IE中，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;
}

预览： http ： //reveofficial.com/fashion.php

Answer 1

您的问题是，所有<div class="over">最终都在Firefox中相互堆叠。 乍一看，实际上是规范中要求的渲染（某种程度上规范要求对绝对偏移div的自动偏移量进行任何特定的渲染），所以我不确定为什么其他浏览器会做不同的事情。 但是规范在这里几乎没有定义行为。

我建议给这些div非自动偏移量（具体而言，集left在他们0 ， 25% 50% 75%所以他们会实际上是你想让他们成为可靠的，而不是靠行为的CSS规范明确没有定义。