Question

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

：hover在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;
}

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

Answer 1

您的问题是，<div class="over">所有内容最终都会在Firefox中叠加在一起。乍一看，这实际上是规范中要求的渲染（规范要求自动偏移绝对定位div的任何特定渲染），所以我不确定为什么其他浏览器做了不同的事情。但规范在这里留下的行为大多未定义。

我建议给这些div非自动偏移（具体来说，将left设置为0，25%，50%，75%），这样他们就可以了实际上是你希望它们可靠的地方，而不是依赖于CSS规范明确没有定义的行为。

：hover在Firefox中不起作用

1 个答案: