Question

我遇到问题让我的图片在悬停时转换，我相信问题在于css .play_button a:hover 当更改为#play_button a:hover时，它将转换，但-webkit-transition不再有效。

这是我目前的代码：http://jsbin.com/vesuravabu/edit?html,css,output

感谢您的帮助。

编辑：将转换添加到我尝试使用的示例中。

现在回答这个问题了，谢谢大家的回复。我将它从“.play_button a：hover”更改为“#play_button a：hover” 我也发现了我的过渡问题，在-webkit-transition

之后意外地使用了分号

Answer 1

问题：

您没有任何名为play_button（.play_button）的课程。您可以将.play_button更改为#play_button以解决您的问题。

Jsbin

#play_button a {
  background: url(http://placehold.it/119x69) repeat-y;
  background-size: 100%;
  padding: 0 36px;
  width: 119px;
  height: 69px;
  display: block;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#play_button a:hover {
  background: url(http://placehold.it/200x150);
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <div class="sidebar_item">

    <div id="play_button">
      <a href="#"></a>
    </div>

  </div>

</body>

</html>

Answer 2

您肯定需要使用#play_button a:hover而不是.play_button a:hover，因为play_button是ID，而不是类名。

我的示例中没有看到任何-webkit-transition语句，您是如何尝试使用此语句的？使用CSS过渡不可能以这种方式从一个图像转换到另一个图像。但是，您可以采用稍微不同的方式完成此操作：将第二个DOM元素叠加在第一个DOM元素之上，设置为opacity: 0，并将悬停图像应用于此顶部元素。然后，transition悬停时的1不透明度。这可能会产生你正在寻找的效果。

编辑：既然您已经添加了转换，我们也可以解决这个问题。请注意，在您的示例中，“webkit”拼写错误，但主要问题是您没有指定要转换到的新宽度和高度。试一试：

#play_button a
{
    background: url(http://placehold.it/119x69) repeat-y;
    background-size: 100%;
    padding: 0 36px;
    width: 119px;
    height: 69px;
    display: block;
    cursor: pointer;
    transition: 0.2s;  /* Don't need webkit prefix here for modern browsers */
    box-sizing: border-box;  /* Tell browser: Don't include padding in size calculations */
}

#play_button a:hover
{
    background: url(http://placehold.it/200x150);  /* This will snap, not transition */
    width: 200px; /* New width & height, will be used for transition */
    height: 150px;
}

CSS锚点悬停图像转换

2 个答案: