Question

我已经在我的应用程序中实现了CSS3，如果我在使用transition属性更改span标记图像时悬停li标记。它在chrome中运行良好，但不幸的是这种效果（转换）在firefox中无法正常工作

注意：li span span作为产品图片

我尝试过以下HTML＆amp; css代码：

<ul>
    <li class="list-col">
        <a href="javascript:void();">
            <span class="service-image">&nbsp;</span>
            <h4>Pest control</h4>
        </a>
    </li>
</ul>

CSS 

  .list-col .service-image {
     background: url("../images/service-08.png") no-repeat 0  0 transparent;
  } 

  .list-col:hover .service-image { 
     background: url("../images/service-08-hover.png") no-repeat 0 0 transparent;
     transition: all 5s ease 0s;
  }

请分享您的答案以纠正问题。

Answer 1

您没有在悬停状态下提供图片网址。将鼠标悬停在图像上会发生什么？试试这样：

.service-image {
    background-image: url(yourimage.png);
    /* needs vendor prefix */
    -webkit-transition: .5s;
    transition: .5s;
}
.service-image:hover {
    background-image: url(otherimage.png);
}

Answer 2

我认为我的查询在Mozilla中不起作用。

原因， [https://bugzilla.mozilla.org/show_bug.cgi?id=546052]

请参阅链接并澄清解决方案。

注意：

我的想法是使用Font然后解决问题。

Answer 3

这里有一些条件，Summary。对于.list-colenter code here > a:hover > .service-image { background-image: url(yourimage.png); transition: all 5s ease 0s; /* transition is using statics */ } .list-colenter code here > a:hover > .service-image { background-image: url(otherimage.png); }，您需要正确指定路径。

Here 一个复杂的分支触发示例。

这里是您需要的代码：

<ul>
    <li class="list-col">
        <a href="javascript:void();">
            <span class="service-image">&nbsp;</span>
            <h4>Pest control</h4>
        </a>
    </li>
</ul>

的

{{1}}

CSS3悬停背景图像在mozilla中不起作用

3 个答案:

这里是您需要的代码：