0

Нужно чтобы в начале отображался первый блок с text1. Как будто уже навели на item1. Уже после как навели на другой item показывать соответствующий им блок.

.menu {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item {
  width: 30%;
  padding: 20px;
  background: #60a3bc;
  border-bottom: 1px solid #000;
}
.menu__item:hover .content {
  display: block;
}

.content {
  display: none;
  position: absolute;
  top: 0;
  left: 34%;
  height: 100%;
  background: #ccc;
  width: 50%;
}
<div class="catalog">
  <ul class="menu">
    <li class="menu__item">
      Item1
      <div class="content">
        text1
      </div>
    </li>
    <li class="menu__item">
      Item2
      <div class="content">
        text2
      </div>
    </li>
    <li class="menu__item">
      Item3
      <div class="content">
        text3
      </div>
    </li>
  </ul>
</div>

1
  • 1
    Если вам помог этот ответ, тогда примите его, пожалуйста.
    – Axenow
    18 окт 2018 в 10:36

1 ответ 1

1

А если просто его показывать по-умолчанию? Или я не правильно понял проблему?

.menu {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item {
  width: 30%;
  padding: 20px;
  background: #60a3bc;
  border-bottom: 1px solid #000;
}
.menu__item:hover .content {
  display: block;
}

.content {
  display: none;
  position: absolute;
  top: 0;
  left: 34%;
  height: 100%;
  background: #ccc;
  width: 50%;
}
.defs {
  display: block;
}
<div class="catalog">
  <ul class="menu">
    <li class="menu__item">
      Item1
      <div class="content defs">
        text1
      </div>
    </li>
    <li class="menu__item">
      Item2
      <div class="content">
        text2
      </div>
    </li>
    <li class="menu__item">
      Item3
      <div class="content">
        text3
      </div>
    </li>
  </ul>
</div>

1
  • Отлично. Подскажите как сделать так, чтобы сохранялось состояние? например навели на item2 и остался text2, даже если убрали курсор от этих блоков
    – stiv
    18 окт 2018 в 13:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.