Css ：悬停不'；我不能在Firefox中工作

希望有人能帮我解决这个问题

：hover在Firefox中不起作用。在Google Chrome中，Safari、IE非常有效。在IE中，动画不起作用，但它不更丰满，至少起作用。我知道如何用jquery解决它，它不是一个解决方案

多谢各位

HTML:

---

预览：

您的问题是，在Firefox中，您的

最终都堆叠在一起。乍一看，这实际上是规范中要求的渲染（在某种程度上，规范要求对自动偏移绝对定位div进行任何特定渲染），因此我不确定为什么其他浏览器会做一些不同的事情。但是规范中的行为大多没有定义

---

我建议给那些div设置非自动偏移（特别是，将

左

设置为

0

，

25%

，

50%

，

75%

），这样它们实际上就在您希望它们可靠的位置，而不是依赖CSS规范明确未定义的行为。

使用悬停的

不透明度：1.0

，适用于meIt不适用于我，当我重新打开它时，inspect元素只是再次将其更改为1。实际的悬停代码正在工作，其效果只是被图像掩盖了。如果你走到只有一张图片的底部，你会看到文本出现。经过更多的调整，我想我已经找到了部分答案。如果从css中删除

position:absolute

，您应该能够看到图像旁边显示的文本。但是，当您上下滚动时，某些图像会丢失。这对我不起作用不透明度：1:0我将显示值从内联块更改为内联表。。现在我只能看到第一张照片上的最后一个div。O.O

     <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>

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;
}