CSS 锚点悬停图像过渡
Posted
技术标签:
【中文标题】CSS 锚点悬停图像过渡【英文标题】：CSS anchor hover image transition 【发布时间】：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 情况，很抱歉我忘记在示例代码中应用转换。
【参考方案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 很陌生。以上是关于CSS 锚点悬停图像过渡的主要内容，如果未能解决你的问题，请参考以下文章