Mari-art
@Mari-art
noob

При нажатии на кнопку, открывался определенный блок?

Как найти div элемент за пределами родителя при навидении, не могу понять.
<div class="container">
  <div class="row">
    <div class="col-3 btn btn-primary btn-menu">Nanigation</div>
  </div>
</div>
<div class="container main-menu px-0">
  <div class="row g-0">
    <ul class="list-group col-3">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>
    <div class="border rounded col-9">
      <h3>title category</h3>
    </div>
  </div>
</div>

.main-menu { display: none; }

.btn-menu:hover .main-menu { display: block; }

.main-menu div ul { position: relative; }
.main-menu div ul::after { content: ''; position: absolute; left: 48%; top: -1.2rem; border: 10px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 10px; border-top: 10px solid rgb(248 249 250); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
Pavel-ww
@Pavel-ww
В CSS это не возможно. Максимум что возможно - менять элементы на том же уровне что и элемент с hover следующие ЗА ним, внутри их общего родителя
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Gavr_Gavr
@Gavr_Gavr
В целом "ОТКРЫТЬ" при нажатии на кнопку можно с помощью CSS. Только вот "ЗАКРЫТЬ" блок потом при нажатии на туже кнопку не получится. Но можно внутри открывающегося блока сделать кнопку для его закрытия. Выглядеть будет примерно так:

<div class="container">
  <div class="row">
  <div class="col-3 btn btn-primary btn-menu"><a href="#menu">Nanigation</a></div>
  </div>
</div>
<div id="menu" class="container main-menu px-0">
  <div class="row g-0">
    <ul class="list-group col-3">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>
    <div class="border rounded col-9">
      <h3>title category</h3>
      <h5><a href="#close">CLOSE</a></h5>
    </div>
  </div>
</div>


.main-menu{
  display:none;
}

.main-menu:target{
  display:block;
}


Ссылка на jsfiddle
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы