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文件有一种有趣的方式并且引入额外的行）

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

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

提前致谢。

Answer 1

您不能将CSS过滤器应用于背景图像......只能使用实际的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

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

1 个答案: