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

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

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

1 个答案: