HTML/CSS 悬停时带有 sprite 的社交按钮

Question

你好，我正在尝试用下一个想法创建 HTML/CSS 按钮：

到运行悬停时带有 p 文本的精灵动画。

问题：

悬停时出现动画，但不起作用。
P 文本已隐藏，但悬停时不会显示。

HTML:

<div> 
    <a href="https://www.facebook.com/"><p class="follow">Follow</p></a>
</div>

CSS:

div a {
    width: 128px;
    height: 128px;
    margin: auto;
    display: block;
    background: url('http://s29.postimg.org/4yqcgdcbn/128.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

div a:hover {
    width: 128px;
    height: 128px;
    background: url('http://s10.postimg.org/alazhqpu1/sprite.png');
    background-position: 0px 0px;  
    animation-play-state: paused;
    animation: play 5s steps(10) infinite;
    transorm: translateZ(0);
}

@keyframes play {
    from { background-position:0px 0px; }
    to { background-position: 1280px 0px; }
 }

.follow {
    font-size: 18px;
    font-weight: 300;
    line-height: 150px;
    text-align: center;
    color: white;
    display: none;
}

.follow:hover {
    display: block;
}

Answer 1

修复 <p> 文本问题。

更改此 CSS 规则：

.follow:hover {
    display: block;
}

对此：

div a:hover .follow {
    display: block;
}

Answer 2

1) 您需要 -wekbit 前缀才能使动画在 Safari 中运行。您还设置了 animation-play-state: paused;，因此动画不会运行。不确定为什么这不影响 Chrome.

div a:hover {
  animation-play-state: paused; // get rid of this
  animation: play 5s steps(10) infinite;
  -webkit-animation: play 5s steps(10) infinite;
  transorm: translateZ(0);
  -webkit-transorm: translateZ(0);
}
@-webkit-keyframes play {
  from { background-position:0px 0px; }
  to { background-position: 1280px 0px; }
}

2) 如@hopkins-matt 所说，要在悬停时看到 <p>，请将 css 更改为

div a:hover .follow {
  display: block;
}

HTML/CSS 悬停时带有 sprite 的社交按钮

HTML/CSS social button with sprite on hover

html

css

sprite