Скользящая коробка над мышью - CSS - PullRequest
Новая
       76

Скользящая коробка над мышью - CSS

0 голосов
/ 28 февраля 2020

Я хотел бы знать, есть ли лучший способ сделать это:

Кроме того, я не думаю, что это будет работать гладко на адаптивной странице, так что у вас есть какие-либо идеи, чтобы заставить это работать без некоторые позиции, такие как 'bottom: -45px;'.

Я просто задумался над этим, так что это не то, что я собираюсь где-то использовать. Я знаю, что это можно сделать с помощью jquery легко, но мне интересно, есть ли шанс достичь этого эффекта с чистым CSS

.d1 {
  width: 320px;
  border: none;
  padding: 10px;
  margin: 10px 0px;position: relative;
}

.d2 {
  width: 70%;
  position: relative;
  left: 0px;
  right: 0px;
  padding: 20px 0px;
  margin: 10px 0px;
  border: none;
}

.d3 {
  width: 90%;position: relative;
  left: 0px;
  margin: 20px 0px;
  padding: 20px 0px;
  right: 0px;
  border: none;
}

.d3 p, .d2 p, d1 p {
  z-index:999;
  position:relative;

}




.hov {
  width: 40%;
  padding: 20px 10px;
  background-color: #300;
  position:relative;
  opacity:0;
  bottom:-45px;left:0px;
  z-index:0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}

.d2 { pointer-events: none;}
.d3 { pointer-events: auto;}

.d2:hover .hov{
opacity:1;
 bottom:-123px;
}

.d1:hover .hov{
opacity:1;
}
<div class="d1">
div1
  <div class="d2">
    <div class="hov" id="hov">
    </div>
    <p>
      div2
    </p>
    <div class="d3">
      <p>
      div3</p>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

На самом деле я думаю, что мне удалось это сделать. В этом случае есть два элемента, поэтому я поместил их сверху и снизу основного контейнера. 

.d1 {
  width: 320px;
  padding: 10px;
  margin: 10px;
  position: relative;
  cursor: default;
}

.d2 {
  position: relative;
  margin-top: -15px;
  margin-bottom: 60px;
}

.d3 {
  position: relative;
  margin-bottom: -15px;
}

.d3 p,
.d2 p {
  z-index: 999;
  position: relative;
}

.hov {
  width: 40%;
  height: 40%;
  background-color: #300;
  position: absolute;
  opacity: 0;
  top: 0%;
  left: 0px;
  z-index: 0;
  transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}

.d3:hover+.hov {
  top: 60%;
}

.d1:hover .hov {
  opacity: 1;
}
<div class="d1">

  <div class="d2">
    <p> div2 </p>
  </div>

  <div class="d3">
    <p> div3 </p>
  </div>

  <div class="hov"></div>

</div>
0 голосов
/ 29 февраля 2020

Обычно требуется то, что вы бы назвали «определенным позиционированием», но если бы вы запускали его с отзывчивой страницей, пользователю, с помощью мобильного телефона, пришлось бы щелкнуть область, прежде чем он переместится, вместо этого зависания Использование чистого CSS было бы перетаскиванием, потому что вы должны буквально l oop по всем кодам.

Мой совет, как правило, можно использовать конкретное c число (т.е. -45px ) только для вертикальных измерений.

...