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

时间:2015-03-26 21:25:22

标签: html css css3

我遇到了一个问题并试图解决它,但无法弄明白。

当我将鼠标悬停在另一个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

提前致谢。

1 个答案:

答案 0 :(得分: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