CSS转换/悬停效果在Safari中无法正常工作。

Question

我目前正在重新设计我的一个客户网站（http://citycredits.nl/），并遇到以下问题：

当您在主页上悬停产品时，应该会出现一个带有产品名称/描述的淡入框。

这在Chrome、FireFox和InternetExplorer中运行得很好。 但是，当我在Safari（Windows版）中运行它时，悬停不起作用。然而，当我“mouseout”产品时，描述块会闪烁。

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>

- SAMES

---

请看这篇文章：http://appleinsider.com/articles/12/07/25/apple_kills_windows_pc_support_in_safari_60 - DMande

最新的Safari for Windows已经有三年历史了。建议向您的用户推荐使用更新的浏览器。当然，尝试支持旧版浏览器并不是一个坏主意，但是您必须在某个地方划定界限。您还在支持Opera 12吗？ - Mr Lister

我正在使用Safari 5.1.7 for Windows，因为我没有苹果设备来测试。即便如此，Webkit规则应该能够正常工作，对吧？有没有人使用苹果设备愿意测试一下这个网站？（刚刚在Browserling.com上使用Opera 12进行了测试，那个可以正常工作。）只有Safari一直出问题。 - SAMES

使用最新的系统和Safari，鼠标悬停仍然存在错误，并且只在“鼠标移出”事件时淡出时才显示。 - Marian Rick

我尝试让你的鼠标悬停可见，但我无法做到。这有点混乱。 - Marian Rick

你的问题至少有一部分在我的下面的答案中有解释。虽然你在问题中删除了不必要的类和标记，这绝对是正确的做法，但看起来你在这个过程中删掉了一些关键内容。请参考http://stackoverflow.com/help/mcve以获取有用的示例来进行故障排除。 - Palpatim

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 上，它将按预期工作。

无论此建议是否解决了您的特定问题，请确保发布一个准确表示代码的示例，这将节省每个人的时间并有助于更快地确定答案。

- Palpatim