CSS 锚悬停图像过渡

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) 的 class。您可以将 .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，而不是 class 名称。

我在您的示例中没有看到任何 -webkit-transition 语句，您打算如何使用它？无法使用 CSS 过渡以这种方式从一幅图像过渡到另一幅图像。但是，您可以通过稍微不同的方式完成此操作：将第二个 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 锚悬停图像过渡

CSS anchor hover image transition

html

css

anchor

transition

hover