将鼠标悬停在父div上以加载child：after。 Css精灵过渡

Question

我可以将鼠标悬停在父div上以改变子div：之后。这是我可以过渡的精灵。

我在这里看过this。

由于这些是类，我不确定格式化。

这是一个jsfiddle，看看我想要实现的目标。

.project-button {
  position: relative;
  border-top-style: solid;
  border-bottom-style: solid;
  border-width: 1px;    
  width: 31.555%;  
  color: #a4afbc;
  cursor: pointer;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.project-button:hover {
  border-left: 0;
  color: #343434;
}

.button-previous {
  position:relative;
  display: inline-block;
  text-indent: -9999px;  
  margin-top: 7.065%;
  margin-bottom: 7.065%;
  padding-top: 39.664%;    
  width: 18%;
  height: auto; 
  background: url(../images/buttons/project-sprite.png) no-repeat top left;
  background-size: 200%;
}

.button-previous:after {
  position: absolute;      
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background: url(../images/buttons/project-sprite.png) no-repeat bottom left;
  background-size: 200%;   
  opacity: 0;
  -webkit-transition: opacity .2s ease;
  -moz-transition: opacity .2s ease;
  -ms-transition: opacity .2s ease;
  -o-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.project-button:hover .button-previous:after {
  opacity: 1;
}

<div class="project-button">
  <div class="button-previous">
  </div>
  <div class="button-title">
    <h5>Title</h5>
  </div>
  <div class="button-about">
  </div>
  <p>
    <a class="divLink" href="project.html"></a>
  </p>
</div>