CSS转换/悬停效果在Safari中不起作用

Question

我正在重新设置我的一个客户站点（ http://citycredits.nl/ ），我偶然发现了以下问题：

当您将产品悬停在主页上时，您应该获得带有产品名称/说明的fadeIn框。

这适用于Chrome，FireFox和InternetExplorer。 但是当我在Safari中运行它（对于Windows）时，悬停不起作用。 但是，当我'删除'产品时，描述块会闪烁。

css代码：

ul.products a li.product .details  {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);

    width: calc(100% - .9em) !important;
    background: rgba(53, 82, 100, .5) !important;
    top: 33% !important;
    bottom: 33% !important;
    height: calc(34% - .9em);
    text-align: center;
    padding: .5em !important;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;

    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}

ul.products a li.product:hover .details {
    -moz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;

    -webkit-transition: opacity .8s ease-in-out;
    -moz-transition: opacity .8s ease-in-out;
    -o-transition: opacity .8s ease-in-out;
    transition: opacity .8s ease-in-out;
}

产品的HTML代码：

<ul class="products">
    <li class="product ...">
        <div class="details">
           ... details content here ...
        </div>
    </li>
    <li> ... more listitems ... </li>
</ul>

Answer 1

至少部分问题是您的HTML无效，并且您网站上的HTML不是您在问题中发布的内容。 你发布了：

<ul class="products">
    <li class="product ...">
        <div class="details">
           ... details content here ...
        </div>
    </li>
    <li> ... more listitems ... </li>
</ul>

您网站上的实际内容是：

<ul class="products">
  <a href="http://...">
    <li class="...">
      <img ...>
      <noscript>&lt;img.../&gt;</noscript>
      <div class="details...">
           ... details content here ...
      </div>
    </li>
  </a>
  <a><li> ... more listitems ... </li></a>...
</ul>

ul的唯一允许子元素是li ， script或template 。 如果你把你的a内li那么它将按预期工作在最新的Mac的Safari。

无论此建议是否可以解决您的特定问题，请务必准确发布代表您的问题的代码。 它将节省每个人的时间，并帮助更快地确定答案。