Question

我正在尝试使用Bootstrap。我遇到了“导航栏”的问题。实际上在“navbar-header”中有一个图像。在代码中，我有一个带有Bootstrap的navbar-brand类的图像元素。在“navbar-brand”类的CSS中，我将背景颜色输入为白色。他的效果很好，直到鼠标光标移到图像上。如果它发生，背景颜色就像透明。我已经验证了一些工具可以改变他的颜色，因为我认为这可能是img:hover或类似的东西，但没有。

这些图片应该显示我的麻烦：
鼠标不覆盖
https://imgur.com/NxwtcHN
鼠标盖
https://imgur.com/VYaa2E0
（图像尺寸大于网站支持）。

编辑：我使用编译引导程序版本，除了jquery，CDN我已经从bootstrap的网站复制了它。

这是我使用的代码：
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="resource/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="resource/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="StileBootstrap.css"/>
</head>
    <body style="background-color:rgb(230, 230, 230);">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span style="display:none" class="navbar-toggle" data-toggle="collapse" data-target="#remBar"></span>
      <div>
        <img class="navbar-brand" src="resource/Logoskillfactory.png"/>
      </div>
    </div>
    <div class="collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Contattaci</a></li>
            <li><a href="#">Chi siamo</a></li>
            <li><a href="#">Città</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse" id="remBar">
        <ul>
            <a href="#"><button type="button" class="btn btn-default navbar-btn">Home</button></a>
            <a href="#"><button type="button" class="btn btn-default navbar-btn">Contattaci</button></a>
            <a href="#"><button type="button" class="btn btn-default navbar-btn">Chi siamo</button></a>
            <a href="#"><button type="button" class="btn btn-default navbar-btn">Città</button></a>
        </ul>
    </div>
  </div>
</nav>
</body>
</html>

CSS：

/* Remove the navbar's default margin-bottom and rounded borders set
background color and set other property*/
.navbar {
margin-bottom: 0;
padding-bottom:0;
border-radius: 0;
background-color:rgb(230, 230, 230);
}
.navbar-brand {
padding:5px 10px 5px 5px;
background-color:white!important;
}
ul {
-webkit-margin-after:0;
margin-bottom:0;
}
#remBar {
    background-color:red;
}

鼠标悬停时，Bootstrap navbar-brand禁用显示背景图像

0 个答案: