我遇到了一个问题并试图解决它,但无法弄明白。
当我将鼠标悬停在另一个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
提前致谢。
答案 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