Arhn - архитектура программирования

Сделайте выпадающие элементы видимыми, наведя курсор на одноуровневый элемент

У меня есть раскрывающееся меню, структурированное как приведенный ниже код, HTML-код которого я могу изменить (также без добавления javascript, если только он не может проникнуть в тег стиля). Все кнопки состояния, кроме кнопки «вкл», должны быть невидимы, пока кнопка «вкл» не будет наведена. Кроме того, поле поиска всегда должно оставаться видимым и не вызывать событие наведения, потому что это сдвинет его вниз, как только кто-то наведет на него курсор -> плохой UX.

Я успешно реализовал это в CSS, но, как видите, при наведении курсора на выпадающий контент они начинают исчезать один за другим. Как я могу это решить?

.status-menu .status-button.on {
    display: block;
    clear: both;
}

.status-menu .status-button.on:hover ~ .status-button {
    display: block;
}

.status-menu .status-button {
    display: none;
    clear: both;
}

.status-menu .status-button:hover ~ .status-button {
  display: block;
}
<div class="status-menu">
    <a class="status-button on">...</a>
    <a class="status-button">...</a>
    <a class="status-button">...</a>
    <div class="search-container">
        <div id="search-box"><input type="text" value=""></div>
        <a id="search-button">
            <i class="fa fa-search"></i>
        </a>
    </div>

html drop-down-menu css css-selectors
26.08.2017

  • Вы говорите, что не можете изменить HTML. Можете ли вы добавить или изменить javascript? 29.08.2017
  • @Rounin, к сожалению, нет, если только вы не знаете, как вставить javascript в тег стиля. 30.08.2017

Ответы:


1

Это было сложно, но если я правильно понял вопрос, я уверен, что разгадал его.

Это решение использует сам .search-container, чтобы скрыть два .search-buttons:

  • transform: translateY() сдвигает .search-container вверх (т.е. поверх второго .search-button)
  • непрозрачный padding-bottom на .search-container скрывает третий .search-button сразу под ним, когда он находится в более высоком положении

.status-menu {
    display: inline-block;
    clear: both;
}

.status-button {
    display: block;
    cursor: pointer;
}

.search-container {
    padding-bottom: 20px;
    background-color: rgb(255, 255, 255);
    transform: translateY(-40px);
}

.status-button:hover ~ .search-container {
    transform: translateY(0);
}
<div class="status-menu">
    <a class="status-button on">Status Button On</a>
    <a class="status-button">Status Button</a>
    <a class="status-button">Status Button</a>
    <div class="search-container">
        <div id="search-box"><input type="text" value=""></div>
        <a id="search-button">
            <i class="fa fa-search"></i>
        </a>
    </div>

29.08.2017

2

К сожалению, ваша проблема не решается с помощью чистого CSS, поскольку общий селектор родственных элементов ищет только элементы, идущие после указанного элемента. Дополнительную информацию о выборе братьев и сестер см. в MDN.

Вам понадобится предыдущий селектор родственных элементов, которого не существует. Единственной альтернативой было бы использование JavaScript, если у вас есть возможность добавить его. Вот рабочий пример:

var links = document.getElementsByClassName('status-button');
for (i=0; i<links.length; i++) {
  links[i].addEventListener('mouseover', showDropDown);
  links[i].addEventListener('mouseout', hideDropDown);
}
function showDropDown() {
  for (i=0; i<links.length; i++) {
    links[i].style.display = 'block';
  }
}
function hideDropDown() {
  for (i=1; i<links.length; i++) {
    links[i].style.display = 'none';
  }
}
.status-menu .status-button:not(.on) {
  display: none;
}
<div class="status-menu">
  <a class="status-button on">...</a>
  <a class="status-button">...</a>
  <a class="status-button">...</a>
  <div class="search-container">
    <div id="search-box"><input type="text" value=""></div>
    <a id="search-button">
      <i class="fa fa-search"></i>
    </a>
  </div>
</div>

26.08.2017
  • Извините, я забыл упомянуть требование. Я отредактировал свой вопрос, чтобы вы могли видеть, чего я также хочу достичь. 26.08.2017
  • Отредактировал мой ответ. 27.08.2017
  • Извините, но я забыл добавить еще один важный факт. 30.08.2017
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..