背景分裂

Question

有没有办法使用CSS背景分割技术here在5个不同的位置拆分背景，而是在悬停时将其设置为可点击？

以下是我试图实现的一个例子：

JSFIDDLE到use

Here is a live example和一些代码：

HTML

<div>
  <a href="#">Brooklyn Bridge</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Ovo);

$shimmerDark: #A68B03;
$shimmerLight: #FAD109;
$duration: 100ms;

@function duration($n) {
  @return $n * $duration;
}

body {
  background-image: url('http://s.cdpn.io/3556/white_wall_hash.png');
}

div {
  width: 500px;
  height: 332px;
  position: relative;
  margin: 10% auto 0;
  overflow: hidden;
  background-color: #fff;

  a {
    display: block;
    font-family: 'Ovo', serif;
    word-spacing: 0.15em; 
    line-height: 332px;
    text-align: center;
    text-decoration: none;
    color: #A68B03;
  }

  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    background-image: url('http://farm7.staticflickr.com/6118/6358751375_2daa56977a.jpg');
    background-repeat: no-repeat;
    width: 500px;
    height: 166px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;    
  }

  &:before {
    background-position: top;
    top: 0px;
  }  

  &:after {
  bottom: 0px;
  background-position: bottom;
  }

  &:hover:before {
    top: -25%;
  }  

  &:hover:after {
    bottom: -25%;
  }  

}

@-webkit-keyframes shimmer {
   from { color: $shimmerDark; }
   to   { color: $shimmerLight; }
}

.char1,
.char2,
.char3,
.char4,
.char5,
.char6,
.char7,
.char8,
.char10,
.char11,
.char12,
.char13,
.char14,
.char15
{
   -webkit-animation-name: shimmer;
   animation-name: shimmer;
   -webkit-animation-duration: $duration;
   animation-duration: $duration; 
   -webkit-animation-timing-function: ease;
   animation-timing-function: ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
   -webkit-animation-play-state: paused;
   animation-play-state: paused;
}

.char1 {
   -webkit-animation-delay: duration(0.5);
   animation-delay: duration(0.5);
}

.char2 {
   -webkit-animation-delay: duration(1);
   animation-delay: duration(1);
}

.char3 {
   -webkit-animation-delay: duration(1.5);
   animation-delay: duration(1.5);
}

.char4 {
   -webkit-animation-delay: duration(2);
   animation-delay: duration(2);
}

.char5 {
   -webkit-animation-delay: duration(2.5);
   animation-delay: duration(2.5);
}

.char6 {
   -webkit-animation-delay: duration(3);
   animation-delay: duration(3);
}

.char7 {
   -webkit-animation-delay: duration(03.5);
   animation-delay: duration(3.5);
}

.char8 {
   -webkit-animation-delay: duration(4);
   animation-delay: duration(5);
}

.char10 {
   -webkit-animation-delay: duration(4.5);            
   animation-delay: duration(4.5);
}

.char11 {
   -webkit-animation-delay: duration(5);
   animation-delay: duration(5);
}

.char12 {
   -webkit-animation-delay: duration(5.5); 
   animation-delay: duration(5.5);
}

.char13 {
   -webkit-animation-delay: duration(6);
   animation-delay: duration(6);
}

.char14 {
   -webkit-animation-delay: duration(6.5); 
   animation-delay: duration(6.5);
}

.char15 {
   -webkit-animation-delay: duration(7);
   animation-delay: duration(7);
}

div:hover .char1,
div:hover .char2,
div:hover .char3,
div:hover .char4,
div:hover .char5,
div:hover .char6,
div:hover .char7,
div:hover .char8,
div:hover .char10,
div:hover .char11,
div:hover .char12,
div:hover .char13,
div:hover .char14,
div:hover .char15
{
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

JS

$('a').lettering();