Question

如上所述，我无法选择日历日期上的溢出事件。看来是因为我在日历 overflow:hidden/visible 的类上具有 date: '#cell-shell' 切换触发器。

以下是该特定日期的HTML代码：

<td>
  <div id="09" class="cell-shell>
    <div class="date-num">9</div>
    <div class="event-wrap>
        <span></span> <!--these hold edit buttons when editor is logged in-->
        <span></span>
        <div id="e1" class="cell-data">Event 1</div>
    </div>
    <div class="event-wrap>
        <span></span>
        <span></span>
        <div id="e2" class="cell-data">Event 2</div>
    </div>
    <div class="event-wrap>
        <span></span>
        <span></span>
        <div id="e3" class="cell-data">Event 3</div>
    </div>
    <div class="event-wrap>
        <span></span>
        <span></span>
        <div id="e4" class="cell-data">Event 4</div>
    </div>
    ... <!-- pattern repeats-->
  </div>
</td>

这是我当前的相关CSS：

.cell-shell {
    height: 152px;
    width: 152px;
    overflow: hidden;
}

.cell-shell:hover {
    overflow:visible;
}

.event-wrap {
    position: relative;
    display: inline-block;
    font-size: 0;
}

.event-wrap:hover {
    opacity: .5;
}

通过 CSS 或JS有什么方法可以确定 '#cell-data' 元素的优先级吗？我需要能够单击事件6和7以及以后的事件，但是一旦我的鼠标从'9''.cell-shell'框滑入'16''.cell-shell'框后，'16'似乎接管了。

编辑：我根据大卫的要求添加了更多信息。我认为这无关紧要，但也许没有。我添加了元素以及它们下面的子元素。我还添加了事件包装CSS

Answer 1

这似乎不是因为您将鼠标悬停在16个div上，而是将鼠标移到了事件div之间，而是因为鼠标移到了事件div之间。

在跨越空白之前，请看下面的帧，该事件是您正在16个事件上方结束的事件：

悬停的工作方式是，如果鼠标悬停在元素的任何子元素上，则将继续使用该悬停CSS。但是，一旦鼠标离开子元素的边框并且位于具有元素的元素之外，悬停CSS就会停止工作。

我敢打赌，如果您足够快且准确，则可以让鼠标修剪帧之间的间隙并保持打开状态。但是您的用户可能不会觉得有用。 ; P

一种可能解决此问题的方法是确保事件div之间没有空格。这意味着它们之间没有空白。

为了保持当前的视觉效果而不必添加太多代码，您可以执行以下操作：

...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...

...其中事件包装程序类如下：

.event-wrapper {
   margin: 0px;
   padding: 0px;
}

另一种方法可能是使整个日期框扩大其大小，但这可能需要对布局的工作方式进行一些更改，以防止布局混乱。

无论如何，我希望能有所帮助。

Answer 2

使用z-index将单元格数据元素的优先级设置为高于“ 16”。

在下面找到其用法的示例演示： https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

添加CSS属性 z-index: -1 到CSS中。

.cell-shell {
    height: 152px;
    width: 152px;
    overflow: hidden;
    z-index: -1  // Here
}

.cell-shell:hover {
    overflow:visible;
    z-index: -1 //Here
}

希望它对您有用。

溢出问题：悬停时隐藏/可见切换。 Gif在帖子中可用

3 个答案: