Отобразить дочерний элемент при наведении, скрыть его при потере фокуса - PullRequest
Новая
       1

Отобразить дочерний элемент при наведении, скрыть его при потере фокуса

0 голосов
/ 06 ноября 2018

У меня есть элемент (dropdown-content), который отображается при наведении его родителя (Element2). Когда взаимодействие с элементом (dropdown-content) не происходит, я хочу, чтобы оно действовало так, как оно происходит сейчас, и исчезло, когда зависание закончилось. Но когда элемент получает фокус (щелчок выбирает или вводит или где-то еще в раскрывающемся контенте), я хочу, чтобы он оставался отображенным до тех пор, пока он не потеряет фокус (щелчок где-то за пределами dropdown-content), даже когда курсор покидает dropdown-content. Я уже пытался найти решение с помощью поиска и нескольких вещей, используя CSS and/or javascript, но не смог заархивировать то, что я хочу. Вот пример кода, иллюстрирующий мою проблему: 

.dropdown-content {
  display: none;
  position: absolute;
  border: 1px solid black;
  width: 300px;
  z-index: 1;
}

.dropdown:hover .dropdown-content,
.dropdown-content:focus {
  display: inline-block;
}
<ul>
  <li>Element1</li>
  <li class="dropdown">
    <span>Element2</span>
    <div class="dropdown-content">
      <select>
        <option>option1</option>
        <option>option2</option>
      </select>
      <input type="text">
    </div>
  </li>
  <li>Element3</li>
</ul>

Я бы предпочел CSS-решение, если оно есть, но у меня тоже все в порядке с javascript, но я не хочу JQuery-решение, если это возможно. Если это упростит решение, было бы хорошо, если бы dropdown-contet просто отображался, когда фокусировался только на выбор и ввод.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Вам не нужен Javascript, не говоря уже о jQuery для этого. Это может и должно быть сделано с чистым CSS с псевдоклассом :focus-within. 

.dropdown-content {
  display: none;
  position: absolute;
  border: 1px solid black;
  margin: -3px 0 0 3px;
}

.dropdown:hover .dropdown-content, .dropdown-content:focus-within {
  display: inline-block;
}
<ul>
  <li>Element1</li>
  <li class="dropdown">
    <span>Element2</span>
    <div class="dropdown-content">
      <select>
        <option>option1</option>
        <option>option2</option>
      </select>
      <input type="text">
    </div>
  </li>
  <li>Element3</li>
</ul>
0 голосов
/ 06 ноября 2018

Да, вы можете использовать jQuery для отображения и скрытия элемента при наведении: 

$('.dropdown').hover(
  function () {
    $(this).find('.dropdown-content').show();
  }, 
  function () {
    $(this).find('.dropdown-content').hide();
  }
);

Если вы хотите показать и скрыть внутренний элемент, используйте функцию find().

...