2

Я только начинаю, помогите сверстать элемент, мне нужно, чтобы при наведении на один из этих блоков, появлялся прямоугольник, как на картинке. Я так полагаю, можно сделать div, а потом ещё и hover, но может кто поможет легче сделать или же кто на Codepen видел такое исполнение.

введите сюда описание изображения

3
  • А вы пробовали что-то сделать? По-моему вы уже достаточно сказали — div & hover.
    – Arthur
    3 июн 2018 в 13:42
  • Я пробовал, но ничего не вышло путного, создал по три блока и расположил их, а вот как через hover дальше сделать, не очень понимаю, я вот только расту, новичок 3 июн 2018 в 13:45
  • Добавил ответ, можете посмотреть. И помните, здесь не одобряют такого вида вопросы
    – Arthur
    3 июн 2018 в 14:09

2 ответа 2

4

:root {
  --size: 10rem;
}

* {
  margin: 0;
  padding: 0;
}

.list {
  display: flex;
  position: absolute;
  left: 0.2rem;
  top: 100%;
  width: calc(var(--size) * 3.1);
  border: 1px solid;
  visibility: hidden;
}

ul {  
  list-style-type: none;
  margin-right: 0.5rem;
}

.wrapper {
  display: flex;
  position: relative;
  margin: 1rem;
}

.item {
  width: var(--size);
  height: var(--size);
  border: 1px solid;
  cursor: pointer;
  text-align: center;
  line-height: var(--size);
  margin: 0.2rem;
}

.item:hover~.list {
  visibility: visible;
}
<div class="wrapper">
  <div class="card">
    <div class="item">1</div>
    <div class="list">
      <ul>
        <li><a>link</a></li>
        <li><a>link</a></li>
        <li><a>link</a></li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="item">2</div>
    <div class="list">
      <ul>
        <li><a>link</a></li>
        <li><a>link</a></li>
        <li><a>link</a></li>
      </ul>
      <ul>
        <li><a>link</a></li>
        <li><a>link</a></li>
        <li><a>link</a></li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="item">3</div>
    <div class="list">
      <ul>
        <li><a>link</a></li>
        <li><a>link</a></li>
        <li><a>link</a></li>
      </ul>
      <ul>
        <li><a>link</a></li>
        <li><a>link</a></li>
        <li><a>link</a></li>
      </ul>
      <ul>
        <li><a>link</a></li>
        <li><a>link</a></li>
        <li><a>link</a></li>
      </ul>
    </div>
  </div>
</div>

6
  • top 100% наверно надо было мм ?
    – user33274
    3 июн 2018 в 14:12
  • @МаксимЛенский, разницы никакой, исправил, так и быть=)
    – Arthur
    3 июн 2018 в 14:13
  • это на случай если автор применит твой пример то при изменении высоты координата останется ..автор вопроса же я уверен о var и понятия не имеет :))
    – user33274
    3 июн 2018 в 14:15
  • @МаксимЛенский, ну ничего, выучит))
    – Arthur
    3 июн 2018 в 14:16
  • 2
    @МаксимЛенский, это и есть дружелюбие, предсказал то, что вполне возможно. Когда-то ведь выучит=)
    – Arthur
    3 июн 2018 в 14:18
3

Если что то не ясно спрашивайте

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.items {
  width: 90%;
  margin: 30px auto;
  height: auto;
  display: flex;
  position: relative;
}

.item {
  width: 100%;
  height: 200px;
}

.sub {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 220px;
  display: none;
}

.item1 {
  background: red;
}

.item2 {
  background: green;
}

.item3 {
  background: blue;
}

.subitem1 {
  background: blue;
}

.subitem2 {
  background: red;
}

.subitem3 {
  background: green;
}

.item1:hover~.subitem2 {
  display: block;
  z-index: 100;
}

.item2:hover~.subitem3 {
  display: block;
  z-index: 100;
}

.item3:hover~.subitem1 {
  display: block;
  z-index: 100;
}

p {
  width: 80%;
  margin: auto;
  font-size: 1.6em;
}
<div class="items">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>

  <div class="sub subitem3"></div>
  <div class="sub subitem2"></div>
  <div class="sub subitem1"></div>
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, dolor praesentium soluta beatae asperiores vitae, nam nostrum obcaecati minus modi! Iusto aut deleniti velit libero ipsam quod, accusantium quia. Eos quos eum dolores dicta, nesciunt, debitis
  in harum pariatur a nisi impedit labore molestiae. Totam, placeat. Asperiores praesentium distinctio similique accusamus tempore, atque placeat quo veniam aperiam. Explicabo, possimus perferendis.
</p>

10
  • Спасибо большое вам, а можно ли как-нибудь сделать, чтобы когда наводишь, слитно было, а в это время от других блоков, отступ 3 июн 2018 в 14:45
  • @ОлегБорейко обновил ответ ... так ?
    – user33274
    3 июн 2018 в 14:47
  • Я про тот элемент, который появляется 3 июн 2018 в 14:48
  • @ОлегБорейко опять обновил ответ - так ?
    – user33274
    3 июн 2018 в 14:49
  • @МаксимЛенский, ну вот, всего лишь переменные использовал))
    – Arthur
    3 июн 2018 в 14:56

Ваш ответ

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

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