меню исчезает при наведении курсора на элемент списка - PullRequest
Новая
       103

меню исчезает при наведении курсора на элемент списка

0 голосов
/ 01 августа 2020

при наведении курсора на значок гамбургера в режиме 1000 пикселей появляется меню, но при наведении курсора на меню оно исчезает. Я пробовал z-index и трюки, связанные с позицией, но не могу найти решение. проблема в 1000 пикселей, потому что в полноэкранном режиме я могу навести указатель мыши на подменю, но не на экран 1000 пикселей. пожалуйста, помогите, спасибо. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESPN</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./app.css">
</head>
<body>
    <header class="header">
        <div class="header__logo"><span>ESPN</span> / Media Distribution</div>
        <div class="hamburger__icon__section">
        </div>
        <nav class="navbar">
            <div class="navbar__items">
                <div class="hamburger__icon"><div></div><div></div><div></div></div>
                <ul class="navbar__lists__items">
                    <li class="navbar__hover__items">
                        <a href="#">Sports Programming</a>
                        <ul class="navbar__lists__items__item">
                            <li><a href="#">Boxing</a></li>
                            <li><a href="#">Films</a></li>
                            <li><a href="#">Fina</a></li>
                            <li><a href="#">World Athletics</a></li>
                            <li><a href="#">Ncaa</a></li>
                            <li><a href="#">Pocker</a></li>
                            <li><a href="#">Special Olympics</a></li>
                            <li><a href="#">X Games</a></li>
                        </ul>
                    </li>
                    <li class="navbar__hover__items"><a href="#">Content Calender</a></li>
                    <li class="navbar__hover__items">
                        <a href="#">Contacts</a>
                        <ul class="navbar__lists__items__item">
                            <li><a href="#">Asia Pacific</a></li>
                            <li><a href="#">Canada</a></li>
                            <li><a href="#">Europe, Middle East and Africa</a></li>
                            <li><a href="#">Latin America</a></li>
                            <li><a href="#">Mexico</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="Search">
                        <i class="fa fa-search"></i>
                    </input>
                </div>
            </div>
        </nav>
    </header>
    <div class="video__section">
        <div class="video__header__wrapper">
            <video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>

            </video>
        </div>
        <div class="video__section__content">
            <p><span>ESPN /</span> Media Distribution</p>
        </div>
    </div>

    <div class="image__section">
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
        <div class="image">
            <img src="./food.png" alt="">
            <div class="overlay"></div>
        </div>
    </div>
    <div class="copyright__section">
        <div class="copyright__section__content">
            <p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
        </div>
    </div>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    font-family: 'Fira Sans', sans-serif;
    line-height: 1.6rem;
}
body {
    font-size: 1.6rem;
}
.header {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color:rgb(202, 8, 19);
    color: #fff;
    border-bottom: 1px solid #fff;
}
.header__logo {
    font-size: 20px;
    line-height: 50px;
    user-select: none;
}
.header__logo span {
    font-style: oblique;
}
.navbar__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.navbar__lists__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
}
.navbar__lists__items > li {
    margin: 0 5px;
}
.navbar__lists__items__item {
    width: 250px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 59px;
    left: 0px;
    right: 0;
    list-style: none;
    transition: all 0.3s;
}
.navbar__lists__items__item li {
    cursor: pointer;
    border: 1px solid #666;
    background-color: #fff;
    line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
    background-color: #666666;
    color: #fff;
}
.navbar__lists__items__item li a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    color: #666666;
    text-transform: uppercase;
}
.navbar__hover__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    line-height: 50px;
    z-index: 1;
}
.navbar__hover__items > a {
    margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
    content: ' \02C5';
}
.navbar__lists__items > li > a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
    background-color: #fff;
    color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-10px);
}
.search {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search input {
    border: 1px solid #fff;
    outline: none;
    border-radius: 5px;
    padding: 5px;
}
.search i {
    position: absolute;
    color: #000;
    top: 50%;
    left: 95%;
    transform: translate(-95%, -50%);
    margin-right: -30px;
}
.video__section {
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 40px;
}
.video__header__wrapper {
    width: 100%;
    height: 100%;    
}
.video__header__wrapper video {
    width: 100%;
    height: 100%;
}
.video__section__content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    user-select: none;
}
.video__section__content span {
    font-style: oblique;
}
.image__section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.image__section .image {
    flex-basis: 25%;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 150px;
}
.image__section .image img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform: scale(1.1);
    transition: all 0.3s;
}
.overlay {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 100%;
    background-color: #000;
    width: 100%;
    overflow: hidden;
    opacity: 0.7;
    transition: 0.3s ease;
}
.image:hover img {
    transform: scale(1);
}
.image:hover > .overlay {
    height: 100%;
    bottom: 0;
}
.copyright__section {
    font-size: 10px;
    background-color: rgb(202, 8, 19);
    color: #fff;
}
.copyright__section__content {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 30px;
}

@media (max-width: 1000px) {
    .header {
        padding: 0 10px;
    }
    .navbar__items {
        position: relative;
    }
    .navbar__lists__items {
        display: none;
        position: absolute;
        top: 50px;
        right: 50px;
        width: 300px;
        padding: 0 10px;
        background-color: #fff;
        font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
        z-index: 1;
        box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
    }
    .navbar__lists__items > li > a {
        color: #000;
    }
    .navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
        content: "";
        display: block;
    }
    .navbar__hover__items {
        display: block;
        color: #000;
    }
    .navbar__lists__items__item {
        display: none;
    }
    .video__section {
        font-size: 35px;
    }
    .search {
        height: 50px;
    }
    .hamburger__icon__section {  
        display: flex;
        justify-content: flex-end;
        flex: 2;
    }
    .hamburger__icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        margin-right: 10px;
        cursor: pointer;
    }
    .hamburger__icon > div {
        width: 25px;
        height: 2px;
        margin: 3px 0;
        background-color: #fff;
    }
    .hamburger__icon:hover + .navbar__lists__items {
        display: block;
    }
}

Ответы [ 2 ]

0 голосов
/ 28 августа 2020

Просто добавьте это в свой селектор: 

, .navbar__lists__items:hover

Полное правило должно выглядеть так: 

.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
    display: block;
}
0 голосов
/ 01 августа 2020

Вы можете обрабатывать отображение / скрытие, используя javascript вместо css, потому что способ, которым вы это делаете прямо сейчас, когда браузер обнаруживает, что ваш курсор больше не находится поверх hamburger_buttton, он скроет ваше меню, поэтому было бы лучше обработать событие одним щелчком мыши. Или вы можете проверить этот ответ . Надеюсь, это поможет. 

let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');

hamburgetButton.onclick = function () {
  navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
}
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Fira Sans', sans-serif;
  line-height: 1.6rem;
}

body {
  font-size: 1.6rem;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background-color: rgb(202, 8, 19);
  color: #fff;
  border-bottom: 1px solid #fff;
}

.header__logo {
  font-size: 20px;
  line-height: 50px;
  user-select: none;
}

.header__logo span {
  font-style: oblique;
}

.navbar__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.navbar__lists__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  list-style: none;
}

.navbar__lists__items>li {
  margin: 0 5px;
}

.navbar__lists__items__item {
  width: 250px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 59px;
  left: 0px;
  right: 0;
  list-style: none;
  transition: all 0.3s;
}

.navbar__lists__items__item li {
  cursor: pointer;
  border: 1px solid #666;
  background-color: #fff;
  line-height: 1.6rem;
}

.navbar__lists__items__item li a:hover {
  background-color: #666666;
  color: #fff;
}

.navbar__lists__items__item li a {
  padding: 10px 20px;
  display: block;
  text-decoration: none;
  color: #666666;
  text-transform: uppercase;
}

.navbar__hover__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
  line-height: 50px;
  z-index: 1;
}

.navbar__hover__items>a {
  margin-right: 5px;
}

.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
  content: ' \02C5';
}

.navbar__lists__items>li>a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

.navbar__hover__items:nth-child(2n+1):hover>a {
  background-color: #fff;
  color: rgb(202, 8, 19);
}

.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-10px);
}

.search {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search input {
  border: 1px solid #fff;
  outline: none;
  border-radius: 5px;
  padding: 5px;
}

.search i {
  position: absolute;
  color: #000;
  top: 50%;
  left: 95%;
  transform: translate(-95%, -50%);
  margin-right: -30px;
}

.video__section {
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  font-size: 40px;
}

.video__header__wrapper {
  width: 100%;
  height: 100%;
}

.video__header__wrapper video {
  width: 100%;
  height: 100%;
}

.video__section__content {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  user-select: none;
}

.video__section__content span {
  font-style: oblique;
}

.image__section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.image__section .image {
  flex-basis: 25%;
  overflow: hidden;
  position: relative;
  height: 200px;
  width: 150px;
}

.image__section .image img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform: scale(1.1);
  transition: all 0.3s;
}

.overlay {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 100%;
  background-color: #000;
  width: 100%;
  overflow: hidden;
  opacity: 0.7;
  transition: 0.3s ease;
}

.image:hover img {
  transform: scale(1);
}

.image:hover>.overlay {
  height: 100%;
  bottom: 0;
}

.copyright__section {
  font-size: 10px;
  background-color: rgb(202, 8, 19);
  color: #fff;
}

.copyright__section__content {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 30px;
}

@media (max-width: 1000px) {
  .header {
    padding: 0 10px;
  }
  .navbar__items {
    position: relative;
  }
  .navbar__lists__items {
    display: none;
    position: absolute;
    top: 50px;
    right: 50px;
    width: 300px;
    padding: 0 10px;
    background-color: #fff;
    font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
    z-index: 1;
    box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
  }
  .navbar__lists__items>li>a {
    color: #000;
  }
  .navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
    content: "";
    display: block;
  }
  .navbar__hover__items {
    display: block;
    color: #000;
  }
  .navbar__lists__items__item {
    display: none;
  }
  .video__section {
    font-size: 35px;
  }
  .search {
    height: 50px;
  }
  .hamburger__icon__section {
    display: flex;
    justify-content: flex-end;
    flex: 2;
  }
  .hamburger__icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 10px;
    cursor: pointer;
  }
  .hamburger__icon>div {
    width: 25px;
    height: 2px;
    margin: 3px 0;
    background-color: #fff;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESPN</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./app.css">
</head>

<body>
  <header class="header">
    <div class="header__logo"><span>ESPN</span> / Media Distribution</div>
    <div class="hamburger__icon__section">
    </div>
    <nav class="navbar">
      <div class="navbar__items">
        <div class="hamburger__icon">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <ul class="navbar__lists__items">
          <li class="navbar__hover__items">
            <a href="#">Sports Programming</a>
            <ul class="navbar__lists__items__item">
              <li><a href="#">Boxing</a></li>
              <li><a href="#">Films</a></li>
              <li><a href="#">Fina</a></li>
              <li><a href="#">World Athletics</a></li>
              <li><a href="#">Ncaa</a></li>
              <li><a href="#">Pocker</a></li>
              <li><a href="#">Special Olympics</a></li>
              <li><a href="#">X Games</a></li>
            </ul>
          </li>
          <li class="navbar__hover__items"><a href="#">Content Calender</a></li>
          <li class="navbar__hover__items">
            <a href="#">Contacts</a>
            <ul class="navbar__lists__items__item">
              <li><a href="#">Asia Pacific</a></li>
              <li><a href="#">Canada</a></li>
              <li><a href="#">Europe, Middle East and Africa</a></li>
              <li><a href="#">Latin America</a></li>
              <li><a href="#">Mexico</a></li>
            </ul>
          </li>
        </ul>
        <div class="search">
          <input type="text" placeholder="Search">
          <i class="fa fa-search"></i>
          </input>
        </div>
      </div>
    </nav>
  </header>
  <div class="video__section">
    <div class="video__header__wrapper">
      <video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>

            </video>
    </div>
    <div class="video__section__content">
      <p><span>ESPN /</span> Media Distribution</p>
    </div>
  </div>

  <div class="image__section">
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
    <div class="image">
      <img src="./food.png" alt="">
      <div class="overlay"></div>
    </div>
  </div>
  <div class="copyright__section">
    <div class="copyright__section__content">
      <p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
    </div>
  </div>
</body>

</html>
...