Я уверен, что это простое исправление, но я не могу найти свою ошибку!
На моем 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>
При наведении мыши на элемент