Question

在这个带有子菜单的漂亮的Bootstrap导航栏中，我想摆脱悬停在子菜单上时仍然存在于下拉菜单项上的浅灰色背景（＃f8f9fa）。这可能是默认的引导CSS，但我找不到禁用它的方法。

这是codepen：https://codepen.io/surjithctly/pen/PJqKzQ

<template>
  <img
    :class="imgIsLoaded ? 'show' : ''"
    src="myImg.jpg"
    loading="lazy"
    @load="imgLoadedMethod"
  >
</template>
<script>
export default {
  data () {
    return {
      imgIsLoaded: false
    }
  },
  methods: {
    imgLoadedMethod () {
      this.imgIsLoaded = true
    }
  }
}
</script>
<style scoped>
img {
  opacity: 0;
  transition: 3s;
}

img.show {
  opacity: 1;
}
</style>

Answer 1

您可以通过以下方式覆盖CSS，将此颜色更改为所需的颜色：

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #fff;
}

在上面的示例中，我将其设置为白色。

如何摆脱Bootstrap 4导航栏样式

1 个答案: