Question

当我将鼠标悬停在一个正方形上时，我弹出了一个小窗口，但即使有空白，我也想转到此弹出窗口。

这是我的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/

我想忽略页边空白，让用户转到弹出窗口，使它像没有页边空白一样工作

Answer 1

我的策略是将要显示的元素悬停在left:100%上，以使光标“掉进去”没有间隙。然后，您可以在此元素上使用padding在主元素和悬停元素之间创建视觉空白，并在我的示例中将元素的内容放入内部元素.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>

Answer 2

有几种方法可以做到这一点，但这是一个示例。它可以简单地将元素定位到上一个元素的旁边，而不会出现间隙。

.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>

Answer 3

您可以使用css transitions属性来延迟元素的隐身性。

示例：

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

Updated jsFiddle

在后一个示例中，我增加了与弹出窗口的距离以改进演示：

UPDATED Updated jsFiddle

CSS过渡允许您延迟对DOM的css修改的出现/删除，从而使用户有时间将鼠标从框滑动到弹出窗口。

参考文献：

https://css-tricks.com/almanac/properties/t/transition-delay/

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

忽略CSS中的悬停边距

3 个答案: