Блог

Главная - Вопросы по программированию - Есть ли какое-либо свойство, которое я могу использовать в качестве наведения курсора?

Есть ли какое-либо свойство, которое я могу использовать в качестве наведения курсора?

#html #css

Вопрос:

Я застрял на этом в течение нескольких часов. Я создал навигационную панель в CSS3, и один из ее элементов-раскрывающееся меню.

     nav {
      background-color: #343a40;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
      font-family: Hammersmith One;
    }
    
    nav .logo {
      font-size: calc(1vw   15px);
      margin: calc(0.2vw   5px) 0 calc(0.3vw   5px) 1.5vw;
    }
    
    nav .logo #logo-vector img {
      width: calc(1vw   15px);
      transform: translate(calc(0.4vw   8px), calc(0.35vw   1px));
    }
    
    #parent-ul {
      display: flex;
      width: 50%;
      justify-content: space-evenly;
    }
    
    li {
      list-style: none;
      font-size: calc(1vw   7px);
      word-spacing: 0;
      transition: color 0.15s ease-in;
    }
    
    .list-item a:hover,
    .list-item a:focus {
      color: #d7bcfd;
    }
    
    #nav-more:hover,
    #nav-more:focus {
      color: #d7bcfd;
      cursor: pointer;
    }
    
    li a {
      color: inherit;
      text-decoration: none;
    }
    
    .sub-menu {
      display: none;
    }
    
    #nav-more:hover .sub-menu,
    #nav-more:focus .sub-menu,
    #nav-more:focus-within .sub-menu,
    .sub-menu .child-menu:hover{
      display: block;
      position: absolute;
      margin-top: 1px;
      background-color: #343a40;
      padding: 0.8vw;
      transform: translateX(-4vw);
      line-height: 2;
      color: #ffffff;
    }
    
    .sub-menu a:hover,
    .sub-menu a:active {
      color: #d7bcfd;
    }

Всякий раз, когда я навожу курсор на «Еще», отображается раскрывающееся меню, но как только я пытаюсь навести курсор на любой из вариантов в раскрывающемся списке, оно исчезает.
То, что мне нужно,-это просто :focus псевдокласс. Есть :focus-within так, что даже если я сосредоточусь на своей опции «Больше», выпадающее меню останется, так что, если я смогу получить :hover-within псевдокласс, он останется, но, к сожалению, такого псевдокласса нет.
Что мне делать?

Комментарии:

1. Можете ли вы также поделиться своим HTML-кодом ?

2. Там нет такого свойства, как «фокус внутри», вместо этого вы можете поместить раскрывающийся список в элемент пункта меню таким образом, чтобы «Больше» было сфокусировано, даже если вы сосредоточитесь на раскрывающемся списке

Ответ №1:

Если вы отметите здесь, курсор останется в фокусе, даже если я наведу курсор на раскрывающиеся элементы. Таким образом, вы сможете достичь того, что ищете

 .nav-item:hover {
  color: red;
}

.dropdown {
  display: none
}

.nav-item:hover > .dropdown {
  display: inline-block;
}

.dropdown li:hover {
  color: blue;
} 
 <nav>
  <ul>
    <li class="nav-item">One</li>
    <li class="nav-item">Two</li>
    <li class="nav-item">
      <span>More</span>
      <ul class="dropdown">
        <li class="dd-item">More one</li>
        <li class="dd-item">More two</li>
      </ul>
    </li>
  </ul>
</nav>

Ответ №2:

Все Готово!

Мне просто нужно было добавить z-index: 1 в свой

 #nav-more:hover .sub-menu,
#nav-more:focus .sub-menu,
#nav-more:focus-within .sub-menu,
.sub-menu .child-menu:hover{
  display: block;
  position: absolute;
  margin-top: 1px;
  background-color: #343a40;
  padding: 0.8vw;
  transform: translateX(-4vw);
  line-height: 2;
  color: #ffffff;
}

Спасибо за весь ответ.

Метки: ,