不适用于背景图像的CSS过滤器

Question

我遇到了一个问题，并试图解决它，但无法解决它。

当我在另一个div上盘旋时，我试图在有背景图像的div上应用特定颜色的过滤器。然而，它没有被应用，当我试图在没有悬停状态的情况下对项目本身执行它时，它也没有应用。我可能错过了什么，但我不完全确定是什么。这是我第一次在CSS中使用过滤器，所以它对我来说有点新。

<div class="background-1">
    <div class="container background-3 container-fix">
        <div class="row-fluid">
            <div id="arts_btn" class="hidden-xs hidden-sm col-md-4 col-lg-4 text-center border-bottom border-bottom-hover-arts">
                 <a href="#" id="arts_logo">
                      Youtopia Arts
                 </a>
            </div>
            <div id="services_btn" class="hidden-xs hidden-sm col-md-4 col-lg-4 text-center border-bottom border-bottom-hover-service">
                 <a href="#" id="service_logo">
                      Yourtopia Services
                 </a>
            </div>
            <div id="fair_btn"class="hidden-xs hidden-sm col-md-4 col-lg-4 text-center border-bottom border-bottom-hover-fair">
                 <a href="#" id="fair_logo">
                      Youtopian Fair
                 </a>
            </div>
        </div>
    </div>
</div>

和CSS

    .background-1 {
background-color:#fff;
}

.background-2 {
background-color:#f7f8fa;
}

.background-3 {
background-color:#111;
}

#arts_logo {
background-image:url(http://placehold.it/90x90);
background-position:50% 50%;
display:inline-block;
width:100%;
height: 100px;
background-repeat:no-repeat;
text-indent:-9999px;
}

#service_logo {
background-image:url(http://placehold.it/90x90);
background-position:50% 50%;
display:inline-block;
width:100%;
height: 100px;
background-repeat:no-repeat;
text-indent:-9999px;
}

#fair_logo {
background-image:url(http://placehold.it/90x90);
background-position:50% 50%;
display:inline-block;
width:100%;
height: 100px;
background-repeat:no-repeat;
text-indent:-9999px;
}

.border-bottom-hover-arts:hover {
border-bottom: 15px solid;
border-bottom-color: #6f2c31;
}

.border-bottom-hover-service:hover {
border-bottom: 15px solid;
border-bottom-color: #43396d;
}

.border-bottom-hover-fair:hover {
border-bottom: 15px solid;
border-bottom-color: #26645f;
}
.border-bottom{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 0px;
      border-bottom: 15px solid;
      border-bottom-color: #fff;
}

.container-fix{
  padding: 0px;
}

.border-bottom-hover-arts:hover + #arts_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

.border-bottom-hover-fair:hover + #fair_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

.border-bottom-hover-fair:hover + #fair_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

(很抱歉css部件上出现了奇怪的缩进，但是wordpress有一种有趣的方式来处理css文件并添加额外的行)

我希望你们能发现我的问题，因为我错过了。我也添加了一个代码链接。

http://codepen.io/anon/pen/QwoWyP

提前谢谢。

Answer 1

不能将CSS筛选器应用于背景images...only实际HTML元素。如果您试图影响bg映像而不是内容，则需要另一种解决方案。

但是，假设您的是，试图影响您的选择器的整个元素是错误的。

.border-bottom-hover-arts:hover + #arts_logo{
    filter: hue-rotate(90deg);
    filter: saturate(41);
  -webkit-filter: hue-rotate(356deg) saturate(41);
  -moz-filter: hue-rotate(356deg) saturate(41);
  -o-filter: hue-rotate(356deg) saturate(41);
}

这假设#arts_logo是.border-bottom-hover-arts的兄弟，而实际上它是子

因此，您的选择器应该是

 .border-bottom-hover-arts:hover #arts_logo

或

 .border-bottom-hover-arts:hover > #arts_logo

Codepen

Useful Article on Selectors