CSS transition/hover-effect 在 Safari 中不工作

Question

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

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

这在 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>

Answer 1

至少部分问题是您的 HTML 无效，并且您网站上的 HTML 不是您在问题中 post 编辑的内容。您 post编辑：

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

无论此建议是否解决了您的特定问题，请确保 post 准确表示可说明您问题的代码。它将节省大家的时间并帮助更快地确定答案。

CSS transition/hover-effect 在 Safari 中不工作

CSS transition/hover-effect not working in Safari

html

css

wordpress

woocommerce