Question

布局很简单，在引脚上弹出弹出窗口。我制作了这个简单的HTML：

<div class="pin">
  <div class="popup">
    <div class="arrow1"></div>
    <div class="arrow2"></div>
    <div class="content">
      text...
    </div>
  </div>
</div>

当您悬停.pin元素时，弹出窗口应显示淡入淡出动画。所以.popup元素有CSS：

z-index: -1;
opacity: 0;
transition: all 0.25s ease 0s;

当你悬停.pin时，这个CSS将适用（注意我使用SASS / SCSS语法）：

&:hover, &.active {
  .popup {
    z-index: 9;
    opacity: 1;
  }
}

完整的工作示例：jsFiddle

我使用z-index - s是因为我的问题：即使您进入.popup元素所在的位置，弹出窗口也会显示出来。这是合乎逻辑的，因为它只有opacity: 0;，但我该如何解决？只有当您悬停.popup时才会打开.pin，之后您可以将鼠标移动到.popup元素中，例如，选择文本。我知道我可以用display: none / block;来做，但是我没有动画。你能帮帮我吗？

Answer 1

使用visibility

<强> jsFiddle demo

最初：

visibility: hidden;      /* add this */
opacity: 0;
transition: 0.3s;

当引脚悬停时：

visibility: visible;     /* and this */
opacity: 1;

Answer 2

您可以使用.popup { position: absolute; top: 4px; left: -218px; width: 230px; font-size: 13px; z-index: -1; opacity: 0; transition: all 0.25s ease 0s; pointer-events: none; /* added property */

Updated fiddle

   &:hover, &.active {
    .popup {
      z-index: 9;
      opacity: 1;
      pointer-events: auto;         /*  added property  */
    }
  }

#define MAX_CARS 999
typedef char plate[20];

template <typename T>
int insert_ord (T V[], int ll, int const LF, T e);

当父级处于悬停状态时启用输入元素

2 个答案: