html - 将鼠标悬停在黑色背景上时，如何将文本从黑色更改为白色？

Question

目前我有一个文本显示在背景图片上。然后在悬停时，还有另一个文本是同一个词，我觉得它不对。

如何让只有一个相同的文本停留在背景图像的中心/背景黑色 - 例如，一个在背景图像上显示黑色文本，然后在悬停时，在黑色背景上显示白色文本且不透明度较低。

参见 demo on jsfiddle

HTML

 <a href="/">
   <div class="text-center tkalook fishing" style="margin-bottom: 18px">
     <div class="ratio-3-1 bg-cover" style="background-image:url('http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image5_170127819.jpg');">
     <span style="color: #333; text-transform: uppercase; font-size: 16px; font-weight: 600; position: relative; top: 62px">Fishing</span>
      </div>
  </div>
</a>

CSS

.text-center{text-align:center}
[class*="ratio"]{
  position: relative;
}

[class*="ratio"]:after{
    content: '';
    display: block;
}

[class*="ratio"] .ratio-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.ratio-3-1:after{padding-top: 33.3333% ;}

.bg-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


.tkalook {
  position: relative;
  overflow: hidden;
}

.tkalook:hover:before,
.tkalook:focus:before,
.tkalook:active:before {
    opacity: 1;
}
.tkalook:before{
  content: '';
  display: block;
  opacity: 0;
  background: rgba(0,0,0,.75);
  transition: opacity .3s;
  z-index: 1;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.fishing:before{
    content: "fishing";
    color: #fff;
}

Answer 1

.bg-cover span{
    z-index: 10;
    color: #333;
}
.fishing:hover .bg-cover span{
    color: white;
}

并移除钓鱼文本的内联颜色

jsfiddle http://jsfiddle.net/Drea/vsnxbw0q/