当我向下滚动时,我想隐藏大 Logo 并显示小 Logo
<div class="row clearfix" >
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="10">
<div class="navbar-header"> <a class="big_logo" href="#"><img src="img/logo.png" alt="logo"></a><a class="small_logo" href="#"><img src="img/logo_small.png" alt="logo_small"></a></div>
</nav>
</div>
</div>
我不知道我的 CSS 在这里搞砸了什么:
.big_logo {
}
.big_logo.affix {
display:none;
}
.small_logo {
display:none;
}
.small_logo.affix {
}
最佳答案
您期望 .big_logo
和 .small_logo
获得类 .affix
。具有 data-spy="affix"
的元素实际上获得了 .affix
类,因此您需要将 CSS 选择器修改为 .affix .big_logo 而不是像这样的 .big_logo.affix:
.small_logo {
display: none;
}
.affix .small_logo {
display: block;
}
.affix .big_logo {
display: none;
}
关于html - Bootstrap 词缀 - 向下滚动时无法隐藏图像元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25055271/