Как заставить элемент отображаться при наведении на родительский элемент? - PullRequest
Новая
       24

Как заставить элемент отображаться при наведении на родительский элемент?

0 голосов
/ 01 октября 2018

У нас есть меню, которое отображает меню, используя <ul> (см. Кодовый штифт).Когда класс .one установлен на position: absolute, когда мы перемещаем мышь, элемент с этим классом больше не отображается.

Как мы можем заставить .one отображаться под меню, когда родительский элемент (<li> элемент) имеет :hover в качестве активного?

Пример кодового кода

Мы также попытались переключить top:85px на padding-top: 85px, мы обнаружили, что, когда дочерний элемент имеет цвет фона, добавляется много отступов.

padding top

Ожидаемое поведение:

  1. При наведении первого элемента дочерний элемент <div class="one"> должен быть виден снизу, выровненный послева от контейнера.
  2. При наведении на секунду дочерний элемент <div class="one"> должен быть виден снизу и выровнен слева от контейнера.
  3. сохранить атрибут position: absolute в .one классе.

Текущий выпуск:

issue

Желаемые результаты:

  1. Ожидается, что <div class="one"> будет отображаться ниже first, second или third меню.

expected

Обновление:

Используя решение, предоставленное @Ruzihm, я смог придумать это решение (код) , где я добавил <div class="menu__wrapper">, а затем использовал padding-top, чтобы получить то, что мне нужно.

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Причина, по которой зависание останавливается, заключается в том, что под #one li s есть промежуток, в котором нечего парить.Измените значение .one {top:85px;} на .one {padding-top:15px;} или соответствующее значение, чтобы можно было что-то парить.

Кроме того, если вы хотите точно настроить, насколько далеко от вершины начинается заполнение, выможно использовать комбинацию padding-top и top, например .one{padding-top:25px;top:60px}, чтобы раскрывающийся контент начинался с 85 пикселей сверху. 

$(function() {
  $('li#one').hover(function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#' + el_link + '.' + el_id;

    $(el_sel).toggleClass('is-active');
  });
});
.menu__container {
  margin: 0 auto;
  padding: 10px;
}

.two {
  display: none;
}

.is-active {
  display: block;
}

.one {
  display: none;
  top: 60px;
  padding-top: 25px;
  position: absolute;
  background: #777;
}

li#one>a {
  padding: 10px;
  background-color: #eee;
}

.menu__first {
  background-color: #eee;
}

#one:hover>div.one {
  display: block;
}

#one {
  float: left;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu__container">
  <ul class="menu__first">
    <li id="one">
      <a href="#"> first</a>
      <div class="one">
        <ul>
          <li data-at="some-link" id="two">
            <a href="#"> some</a>
          </li>
          <li data-at="path-link" id="two">
            <a href="#"> path</a>
          </li>
          <li data-at="another-one" id="two">
            <a href="#"> another one</a>
          </li>
        </ul>
        <div class="dropdown">
          <div class="two" id="some-link">some link text</div>
          <div class="two" id="path-link">path link</div>
          <div class="two" id="another-one">another one</div>
        </div>
      </div>
    </li>
    <li id="one">
      <a href="#"> second</a>
      <div class="one">
        <ul>
          <li>
            <a href="#"> another some</a>
          </li>
          <li>
            <a href="#"> another path</a>
          </li>
        </ul>
      </div>
    </li>
    <li id="one">
      <a href="#"> third</a>
      <div class="one">
        <ul>
          <li>
            <a href="#"> third some</a>
          </li>
          <li>
            <a href="#"> third path</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
0 голосов
/ 01 октября 2018

Это самый простой метод.

Рассмотрим следующий HTML: 

<div classname="parent">
  <div classname="child">...</div>
</div>
  • У вас есть родительский div, который включает дочерний div с произвольным количеством потомков.

В сочетании с этим CSS: 

.parent { ... }
.child { display: none; ... }
.parent:hover .child { display: block; ... }
  • Вы можете установить любые родительские стили, которые вы хотите использовать.
  • И любые стили, которые вы хотели бы выбратьдочерний элемент, включающий display: block то, что скрывает этот элемент от просмотра.
  • Затем вы устанавливаете селектор CSS, который нацелен на дочерний элемент div , когда родительский элемент находится в , и задаетедочерний элемент display: block, который будет показывать дочерний элемент.

Здесь мы используем свойство display со значениями block и none, но вы можете использовать любые правила CSS, которые будутсначала скрыть, а затем показать элемент.Некоторые примеры свойств: block, visibility, opacity.

...