Не могу заставить зависание работать на навигационных якорях - PullRequest
Новая
       4

Не могу заставить зависание работать на навигационных якорях

0 голосов
/ 11 мая 2019

Невозможно заставить указатель мыши работать над ссылками в меню. Я использую Xampp для локального удаленного тестирования. 

.menu ul>li a:hover{
        color: blue;
        font-size: 3rem;
    }

Я пробовал разные селекторы и т.д ... кажется, ничего не работает вот код: 

* {
  box-sizing: border-box;
}

html,
body {
  color: #222;
  font-size: 16px;
  line-height: 1.4;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

header {
  background-image: url("../images/header.jpg");
  height: 70%;
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about {
  background-image: url("../images/bellow_header.jpg");
  height: 70%;
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* here starts the styles for the NAvigation bar */

#logo {
  font-size: 2.5rem;
  text-decoration: none;
  display: block !important;
  text-align: center;
  color: black;
  margin: 1rem auto 0 auto;
  font-family: 'Pacifico', cursive;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0.5rem 1.5rem;
}

.active a {
  color: #CC5200!important;
  font-size: 1.7rem;
  font-weight: 700;
}

.menu a {
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0.3rem;
  text-decoration: none;
  color: black;
}


/*by default on mobile the navigation isn't visible*/

.menu li {
  display: none;
  color: black;
}

.menu .icon {
  order: 99;
  display: block;
}

.menu.menuOpen {
  position: fixed;
  width: 80%;
  left: 10%;
  flex-direction: column;
  background-color: #161415;
  border-radius: 1rem;
  margin: 0.5rem auto;
}


/*moving the icon to the top-right corner*/

.menu.menuOpen .icon {
  position: absolute;
  right: 0;
  top: 0;
}

.menu.menuOpen li {
  display: block;
  text-align: center;
  color: white;
}


/*tablets */

@media only screen and (min-width: 481px) {
  /* Styles */
  /*hidding the icon*/
  .menu .icon {
    display: none!important;
  }
  .menu li {
    display: inline-block;
    margin-left: 0.5rem;
  }
  .menu ul>li a:hover {
    color: blue;
    font-size: 3rem;
  }
  #logo {
    margin-left: 2rem;
    margin-top: 1rem;
    display: inline-block;
    text-align: left;
  }
}


/*Landscape making the background look good */

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
  /* Landscape styles */
  header {
    height: 120%;
  }
}


/*laptops */

@media only screen and (min-width: 769px) {
  /* Styles */
  #logo {
    display: inline-block;
    position: relative;
    top: 3rem;
    left: 4rem;
  }
}


/*large screens */

@media only screen and (min-width: 1025px) {
  /* Styles */
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>StyleTravel-Home</title>
  <!-- Javascript -->
  <script type="text/javascript" src="scripts/app.js"></script>

  <meta name="description" content="StyleTravel is one of the most used services for booking HighEnd Sejours">
  <meta name="keywords" content="Sejours,StyleTravel,HighEnd,Expensive,Exotic">
  <meta name="author" content="Bogdan Mihalca">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- normalize -->
  <link rel="stylesheet" href="css/normalize.css">
  <!--layout styles -->
  <link rel="stylesheet" href="css/layout.css">
  <!-- Font Awesome  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Google fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

  <link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>

<body>
  <header>
    <a href="index.html" id="logo">StyleTravel</a>
    <nav class="menu" id="myMenu">
      <ul>
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="search"><i class="fa fa-search"></i>Search</a></li>
        <li>
          <a href="javascript:void(0);" class="icon" onclick="myResponsiveHamburger()">
            <i id="hamb-icon" class="fa fa-bars"></i></a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="about"></div>

</body>

</html>

1 Ответ

0 голосов
/ 11 мая 2019 
#logo {
font-size: 2.5rem;
text-decoration: none;
/* display: block !important; */

}

Ваш зависания абсолютно в порядке, но одна ошибка!display: block !important; это то, что вы надеваете, оно растягивается и занимает всю видимую ширину.Так что, когда вы наводите курсор мыши на ссылки, на самом деле они не находятся над ними!Если вы удаляете или отменяете стиль, он будет работать!

Хотя ваше наведение не выглядит великолепно, но оно будет зависать, если вы удалите код!Вот мое демо

enter image description here

#logo {
  font-size: 2.5rem;
  text-decoration: none;
  display: block !important;  /* Remove this ans code will work!*/
  text-align: center;
  color: black;
  margin: 1rem auto 0 auto;
  font-family: "Pacifico", cursive;
  outline: 1px solid red;  /* for demonestration */
  background: #3333;     /* for demonestration */
}

Просто удалите закомментированные стили, и все будет хорошо.

...