Question

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

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

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/

Answer 2

div.bg-cover + span {
  /* normal styles for span-text */
}
div.bg-cover:hover + span {
   /* styles for span-text when hovering div.bg-cover */
}

我认为这样。

+ span

允许你操作以下（并且只有那个）span-element，如果你的风格依赖于你的风格，你的.bg-cover元素会悬停，你应该得到你想要的结果。

如何在黑色背景上悬停时将文字从黑色更改为白色？

2 个答案: