0

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

:hover 在 Firefox 中不起作用。在谷歌浏览器、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

4

1 回答 1

1

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

我建议给这些 div 提供非自动偏移量（特别是，将left它们设置为0, 25%, 50%, 75%），这样它们实际上就是您希望它们可靠的位置，而不是依赖于 CSS 规范明确未定义的行为。

于 2013-07-15T04:10:08.443 回答