Игнорировать поля для наведения в CSS - PullRequest
Новая
       24

Игнорировать поля для наведения в CSS

4 голосов
/ 21 марта 2019

Я сделал небольшое всплывающее окно при наведении курсора на квадрат, но я хочу перейти к этому всплывающему окну даже с существующим полем.

Вот фрагмент с моим кодом HTML и CSS: 

.vertical {
    height: 70px;
    width: 70px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: solid lightgrey;
    position: relative;
}

.frame {
    height: 100%;
}

.st {
    height: 250px;
}

.info {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 120%;
    margin-left: -5px;
    border-radius: 5px;
    border: solid black 1px;
    color: white;
}

.vertical:hover .info {
    visibility: visible;
}

.arrow {
    position: absolute;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
    top: 25px;
}
<div class="vertical">
   <div class="frame"></div>
   <div class="info">
      <div class="header">
         <div class="name">Hover</div>
      </div>
      <div class="st"></div>
      <div class="arrow"></div>
   </div>
</div>

Вот пример (если вы не последуете за стрелкой, всплывающее окно закроется):

https://jsfiddle.net/bpez64fr/

Я хочу игнорировать поле и позволить пользователю перейти к всплывающему окну и заставить его работать так, как если бы поля не было

Ответы [ 3 ]

2 голосов
/ 21 марта 2019

Моя стратегия заключается в том, чтобы поместить элемент, который будет отображаться при наведении курсора на left:100%, чтобы не было пробела для «падения» курсора.Затем вы можете использовать padding для этого элемента, чтобы создать визуальный пробел между основным элементом и элементом hover, и поместить содержимое элемента во внутренний элемент .info-inner в моем примере.Обратите внимание, что .info-inner должно быть position:relative, чтобы позиционирование .arrow работало.

Дайте мне знать, если это работает для вас. 

.vertical {
    height: 70px;
    width: 70px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: solid lightgrey;
    position: relative;
}

.frame {
    height: 100%;
}

.st {
    height: 250px;
}

.info {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 100%;
    padding-left: 10px;
}

.info-inner {
    border-radius: 5px;
    border: solid black 1px;
    color: white;
    position: relative;
}

.vertical:hover .info {
    visibility: visible;
}

.arrow {
    position: absolute;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
    top: 25px;
}
<div class="vertical">
   <div class="frame"></div>
   <div class="info">
      <div class="info-inner">
        <div class="header">
           <div class="name">Hover</div>
        </div>
        <div class="st"></div>
        <div class="arrow"></div>
      </div>
   </div>
</div>
1 голос
/ 21 марта 2019

Есть несколько способов сделать это, но вот один пример.Он просто помещает элемент рядом с предыдущим без пробела. 

.vertical {
  height: 70px;
  width: 70px;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  border: 3px solid lightgrey;
  position: relative;
}

.infoWrap {
  opacity: 0;
  position: absolute;
  top: -3px;
  left: 100%;
  padding: 0 10px;
  transition: all ease-in-out 0.2s;
}

.info {
  position: relative;
  background: #eee;
  border: solid #aaa 1px;
  border-radius: 5px;
  color: #666;
  width: 100%;
  min-height: 53px;
  padding: 10px;
}

.vertical:hover .infoWrap {
  opacity: 1;
}

.arrow {
  position: absolute;
  right: 100%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #aaa transparent transparent;
  top: 25px;
}
<div class="vertical">

  <div class="infoWrap">
    <div class="info">
      <div class="header">
        <div class="name">Hover</div>
      </div>
      <div class="arrow"></div>
    </div>
  </div>

</div>
0 голосов
/ 21 марта 2019

Вы можете использовать свойство css transitions, чтобы задержать невидимость элемента.

Пример: 

.info{ transition: visibility 2s ease-out;}

Обновлен jsFiddle

В этом последнем примере я увеличил расстояние до всплывающего окна, чтобы улучшить демо:

ОБНОВЛЕНО Обновлено jsFiddle

CSS-переходы позволяют отложить появление / удаление модификации CSS в DOM, предоставляя пользователю время для перемещения мыши из поля во всплывающее окно.

Ссылки:

https://css -tricks.com / альманах / свойства / т / переход задержки / * ** 1027 тысяча двадцать-шесть *

https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

...