CSS 锚点悬停图像过渡答案

【问题标题】：CSS anchor hover image transitionCSS 锚点悬停图像过渡
【发布时间】：2016-02-13 06:50:33
【问题描述】：

我在将鼠标悬停在图像上时无法转换，我认为问题出在 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 之后不小心使用了分号

【问题讨论】：

看起来你在 :hover 的 css 定义中有一个类 (.) 而不是 id (#)。您提到了一个转换，但没有定义转换。
感谢您更正 id/class 情况，很抱歉我忘记在示例代码中应用转换。

标签： html css hover anchor transition

【解决方案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>

【讨论】：

【解决方案2】：

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

我在您的示例中没有看到任何 -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;
}

【讨论】：

感谢您提供的替代解决方案，这听起来很有希望，但是我对此有点困惑，您能否用代码而不是文字来解释它，或者只是举个例子？我对使用 html 和 css 很陌生。