Блог

Я создал UL, и это li как поле поиска, и я хочу, чтобы этот список исчезал, когда мышь выходит из div, который оборачивает поле поиска. Я справился с этим, используя простой JS, делая это:

 document.querySelector('.wrapperElasticLi').addEventListener('mouseleave', function(event) { event.target.style.display = 'none' })
 

Но это было отклонено, так как они сказали мне, что не хотят этого с помощью javascript, и сказали мне сделать это с помощью CSS.

Каким был бы способ CSS?

Спасибо

Это может сработать:

 ul {display:none;}
.container:hover ~ ul { display: block; }
 

Вот пример кода. Скройте окно поиска по умолчанию, а затем запустите окно поиска, чтобы оно отображалось при наведении курсора мыши на .container . Вы можете навести указатель мыши на родителей, чтобы вызвать события css для дочерних элементов или соседнего брата или сестры, но вы не можете вызвать дедушку и бабушку. Посмотрите здесь для получения дополнительной информации и другого рабочего примера.

 * {
  font-family: sans-serif;
  font-size: 1rem;
}
.container {
  width: 100%;
  background: #efefef;
  padding: 2rem;
  cursor: pointer;
  position: relative;
}
ul.searchbox {
  background: white;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
  display: none;
  position: absolute;
  margin: 0;
  padding: 1rem;
}
ul.searchbox li {
  list-style-type: none;
}

.container:hover .searchbox {
  display: block;
} 

 <div class="container">
  This is a container.
  <ul class="searchbox">
   <li>
      Search:<br>
     <input type="text">
   </li>
  </ul>
</div>