html - CSS 过渡/悬停效果在 Safari 中不起作用

Question

我目前正在重新设计我的一个客户网站 ( http://citycredits.nl/ )，我偶然发现了以下问题:

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

这在 Chrome、FireFox 和 InternetExplorer 中运行良好。 但是当我在 Safari(适用于 Windows)中运行它时，悬停没有反应。但是，当我“鼠标移开”产品时，描述 block 会闪烁。

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

无论此建议是否解决了您的特定问题，请确保发布能够证明您的问题的代码的准确表述。这将节省每个人的时间并帮助更快地确定答案。