Question

我确定这是一个简单的修复，但我找不到我的错误！在我的navbar上，当我要点击任何项目时，一旦我将鼠标悬停，它什么都不做，但是如果我将鼠标放在项目下方，它会显示悬停并且可以点击。

当鼠标悬停在该项目上时，没有任何反应。

鼠标位于项目下方时，悬停发生且可点击

我该如何纠正？

body {
    height: 100%;
    padding-top: 50px;
}

section {
    height: calc(90% - 50px);
}

.navbar-inverse .navbar-nav li.active a {
    background-color: #6dafad;
    /* cor de fundo do que está seleccionado */
    color: #fff;
    /* cor do texto do que está seleccionado */
    border-radius: 2rem;
    /* adiciona as arestas redondas */
    margin: 0 0.25em;
}

.navbar-inverse .navbar-nav>li>a {
    /* altera a cor de texto do cabeçalho */
    color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: #d4e1e3;
    /* altera a cor de texto do cabeçalho quando se passa com o rato por cima */
}

.navbar-inverse .navbar-nav>.active>a,
/* altera a cor de fundo do elemento activo quando se passa por cima */

.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
    color: #d4e1e3;
    background-color: #6dafad;
}

.navbar-inverse .navbar-nav>.open>a,
/* altera a cor de fundo do elemento activo quando se abre o dropdown */

.navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
    color: #d4e1e3;
    background-color: #6dafad;
    border-radius: 2rem;
    /* adiciona as arestas redondas */
    margin: 0 0.25em;
}

.affix {
    padding: 0px;
    -webkit-transition: padding 0.2s linear;
    -moz-transition: padding 0.2s linear;
    -o-transition: padding 0.2s linear;
    transition: padding 0.2s linear;
}

.affix-top {
    padding-top: 15px;
    /* altura entre texto e topo cabeçalho */
    padding-bottom: 15px;
    /* altura entre texto e base cabeçalho */
    -webkit-transition: padding 0.5s linear;
    -moz-transition: padding 0.5s linear;
    -o-transition: padding 0.5s linear;
    transition: padding 0.5s linear;
}

.navbar-brand {
    padding: 0px;
    margin: 0px;
    padding-left: 5px;
    /* se não estiver, parte do logo - zona branca - fica comida -> esquerda */
    max-height: 50px;
    /* altura maxima do logotipo */
}

<!DOCTYPE html>
<html lang="pt">

<head>
    <title>Bebés e Crianças</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="styles/ihover.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <body>

        <div id="wrap">
            <div class="navbar navbar-inverse navbar-light navbar-fixed-top" style="background-color: #97CACA; color: #fff; border-color: transparent;"
                data-spy="affix" data-offset-top="100">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                            aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand navbar-fixed-top" href="#">
                            <img class="img-responsive logo" width="300" height="300" src="https://preview.ibb.co/fSRAjS/logo.png"
                                alt="">
                        </a>
                    </div>
                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="index.html">Home</a>
                            </li>
                            <li>
                                <a href="sobre-nos.html">Sobre Nós</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Serviços
                                    <b class="caret active"></b>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li class="active">
                                        <a href="criancas.html">Bebés e Crianças</a>
                                    </li>
                                    <li>
                                        <a href="adultos.html">Adultos e Séniores</a>
                                    </li>
                                    <li>
                                        <a href="empresas.html">Empresas</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li>
                                        <a href="jobs.html">Venha trabalhar conosco!</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="contactos.html">Contactos</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </body>

</html>

将鼠标悬停在项目上

Answer 1

问题在于navbar品牌。它在导航栏上占据了整个空间。为什么要在navbar-brand上修好。

Answer 2

因为您的徽标而发生这种情况。您需要在class Contact : INotifyPropertyChanged { public bool IsON { get; set; } public string Name { get; set; } public string Status { get; set; } public string ImageUrl { get; set; } public Color MainTxtClr { get; set; } public string ButtonText { get; set; } public Contact() { MainTxtClr = PS.MainTextColor(); IsON = true; ButtonText = "Follow Text"; } }的{{1}}标记中添加class。这里我添加了a类

logo

并添加一些site-logo

行

<a class="navbar-brand navbar-fixed-top site-logo" href="#">
   <img class="img-responsive logo" width="300" height="300" src="http://via.placeholder.com/100x50" alt="">
</a>

工作小提琴here

Answer 3

您需要更改元素的z-index或宽度属性，其中包含当前在堆叠顺序导航顶部设置的类navbar-brand.navbar-fixed-top：

.navbar-brand.navbar-fixed-top {
      ...
      z-index: -1; /*Sets the element be positioned at the back of it's stacking context*/
      ...
}

body {
    height: 100%;
    padding-top: 50px;
}

section {
    height: calc(90% - 50px);
}

.navbar-inverse .navbar-nav li.active a {
    background-color: #6dafad;
    /* cor de fundo do que está seleccionado */
    color: #fff;
    /* cor do texto do que está seleccionado */
    border-radius: 2rem;
    /* adiciona as arestas redondas */
    margin: 0 0.25em;
}

.navbar-inverse .navbar-nav>li>a {
    /* altera a cor de texto do cabeçalho */
    color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: #d4e1e3;
    /* altera a cor de texto do cabeçalho quando se passa com o rato por cima */
}

.navbar-inverse .navbar-nav>.active>a,
/* altera a cor de fundo do elemento activo quando se passa por cima */

.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
    color: #d4e1e3;
    background-color: #6dafad;
}

.navbar-inverse .navbar-nav>.open>a,
/* altera a cor de fundo do elemento activo quando se abre o dropdown */

.navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
    color: #d4e1e3;
    background-color: #6dafad;
    border-radius: 2rem;
    /* adiciona as arestas redondas */
    margin: 0 0.25em;
}

.affix {
    padding: 0px;
    -webkit-transition: padding 0.2s linear;
    -moz-transition: padding 0.2s linear;
    -o-transition: padding 0.2s linear;
    transition: padding 0.2s linear;
}

.affix-top {
    padding-top: 15px;
    /* altura entre texto e topo cabeçalho */
    padding-bottom: 15px;
    /* altura entre texto e base cabeçalho */
    -webkit-transition: padding 0.5s linear;
    -moz-transition: padding 0.5s linear;
    -o-transition: padding 0.5s linear;
    transition: padding 0.5s linear;
}

.navbar-brand {
    padding: 0px;
    margin: 0px;
    padding-left: 5px;
    /* se não estiver, parte do logo - zona branca - fica comida -> esquerda */
    max-height: 50px;
    /* altura maxima do logotipo */
}

.navbar-brand.navbar-fixed-top {
z-index: -1; /*Sets element to be positioned at the back of it's stacking context*/
}

<!DOCTYPE html>
<html lang="pt">

<head>
    <title>Bebés e Crianças</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="styles/ihover.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <body>

        <div id="wrap">
            <div class="navbar navbar-inverse navbar-light navbar-fixed-top" style="background-color: #97CACA; color: #fff; border-color: transparent;"
                data-spy="affix" data-offset-top="100">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                            aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand navbar-fixed-top" href="#">
                            <img class="img-responsive logo" width="300" height="300" src="https://preview.ibb.co/fSRAjS/logo.png"
                                alt="">
                        </a>
                    </div>
                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="index.html">Home</a>
                            </li>
                            <li>
                                <a href="sobre-nos.html">Sobre Nós</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Serviços
                                    <b class="caret active"></b>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li class="active">
                                        <a href="criancas.html">Bebés e Crianças</a>
                                    </li>
                                    <li>
                                        <a href="adultos.html">Adultos e Séniores</a>
                                    </li>
                                    <li>
                                        <a href="empresas.html">Empresas</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li>
                                        <a href="jobs.html">Venha trabalhar conosco!</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="contactos.html">Contactos</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </body>

</html>

以下是有关z-index property和stacking context

的一些信息

Answer 4

请勿混用navbar-brand和navbar-fixed-top。第二个类是为navbar包装器保留的。
将.navbar-brand调整为固定位置。

通过这两个小修正，重叠的徽标将使导航栏自由。

body {
  height: 100%;
  padding-top: 50px;
}

section {
  height: calc(90% - 50px);
}

.navbar-inverse .navbar-nav li.active a {
  background-color: #6dafad;
  /* cor de fundo do que está seleccionado */
  color: #fff;
  /* cor do texto do que está seleccionado */
  border-radius: 2rem;
  /* adiciona as arestas redondas */
  margin: 0 0.25em;
}

.navbar-inverse .navbar-nav>li>a {
  /* altera a cor de texto do cabeçalho */
  color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #d4e1e3;
  /* altera a cor de texto do cabeçalho quando se passa com o rato por cima */
}

.navbar-inverse .navbar-nav>.active>a,

/* altera a cor de fundo do elemento activo quando se passa por cima */

.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
  color: #d4e1e3;
  background-color: #6dafad;
}

.navbar-inverse .navbar-nav>.open>a,

/* altera a cor de fundo do elemento activo quando se abre o dropdown */

.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  color: #d4e1e3;
  background-color: #6dafad;
  border-radius: 2rem;
  /* adiciona as arestas redondas */
  margin: 0 0.25em;
}

.affix {
  padding: 0px;
  -webkit-transition: padding 0.2s linear;
  -moz-transition: padding 0.2s linear;
  -o-transition: padding 0.2s linear;
  transition: padding 0.2s linear;
}

.affix-top {
  padding-top: 15px;
  /* altura entre texto e topo cabeçalho */
  padding-bottom: 15px;
  /* altura entre texto e base cabeçalho */
  -webkit-transition: padding 0.5s linear;
  -moz-transition: padding 0.5s linear;
  -o-transition: padding 0.5s linear;
  transition: padding 0.5s linear;
}
/* Adjusting navbar-brand class for fixed position*/
.navbar .navbar-header .navbar-brand {
  position: fixed;
  top: 0;
  //padding: 0;
  left: 0;
  padding: 0px;
  margin: 0px;
  //padding-left: 5px;
  /* se não estiver, parte do logo - zona branca - fica comida -> esquerda */
  max-height: 50px;
  /* altura maxima do logotipo */
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/ihover.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="wrap">
  <div class="navbar navbar-inverse navbar-light navbar-fixed-top" style="background-color: #97CACA; color: #fff; border-color: transparent;" data-spy="affix" data-offset-top="100">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- Removed "navbar-fixed-top"; this class is reserved for the the whole navbar -->
        <a class="navbar-brand" href="#">
          <img class="img-responsive logo" width="300" height="300" src="https://preview.ibb.co/fSRAjS/logo.png" alt="">
        </a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="sobre-nos.html">Sobre Nós</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Serviços
                                        <b class="caret active"></b>
                                    </a>
            <ul class="dropdown-menu" role="menu">
              <li class="active">
                <a href="criancas.html">Bebés e Crianças</a>
              </li>
              <li>
                <a href="adultos.html">Adultos e Séniores</a>
              </li>
              <li>
                <a href="empresas.html">Empresas</a>
              </li>
              <li role="separator" class="divider"></li>
              <li>
                <a href="jobs.html">Venha trabalhar conosco!</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="contactos.html">Contactos</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

要通过bootstrap覆盖默认样式，我稍微指定了.navbar-brand。因此，您不必担心默认值!important。

如果您的CSS看起来像这样，那么您的specificity分为10分：

.navbar-brand { ... }

如果您的CSS看起来像这样，那么您的specificity分为30分：

.navbar .navbar-header .navbar-brand { ... }

导航栏单击位于项目下方

4 个答案: