Question

我正在使用 Bootstrap 模板，该模板在悬停和滚动时在白色和透明之间翻转导航栏。

我在导航栏中有一个像这样的徽标图像。

<a href="/" class="navbar-brand">
   <img width="100px" src="/assets/logo.png" />
</a>

当导航栏透明时，与白色时相比，我希望能够加载不同的徽标。

我已经看到许多不同的解决方案可以在 Bootstrap 之外执行此操作，但必须有一种使用 Bootstrap 类更简单的方法来实现此目的。

我需要在 html 中同时包含两个图像 url，所以我正在考虑...

 <a href="/" class="navbar-brand">
    <img class="logo-white" width="100px" src="/assets/logo-white.png" />
    <img class="logo-dark" width="100px" src="/assets/logo.png" />
 </a>

但是，我怎样才能根据设置的引导程序类对这些新类做些什么呢？

Answer 1

我认为只是 Bootstrap 类是不可能的，但是当父导航栏处于悬停状态时，您可以使用 CSS 来切换图像的 display 属性：< /p>

/* initial states */
.logo-off {
  display: block;
}

.logo-on {
  display: none;
}

/* hover states */
.navbar:hover .logo-off {
  display: none;
}

.navbar:hover .logo-on {
  display: block;
}

这是一个 codepen。

Answer 2

感谢 Jacob，我的完整 CSS 解决方案如下...

/* initial states */
.logo-light {
    display: block;
  }
  
  .logo-dark {
    display: none;
  }
  
  /* hover states */
  .navbar:hover .logo-light {
    display: none;
  }
  
  .navbar:hover .logo-dark {
    display: block;
  }

/* scroll states */
.navbar.fixed-top .logo-light{
    display: none;
}

.navbar.fixed-top .logo-dark{
    display: block;
}

当导航栏在悬停/滚动时更改状态时更改 Bootstrap 导航栏徽标图像

2 个答案: