没有使用margin-top减去值调用CSS Hover

Question

我希望我的旋转木马的分页与旋转木马及其下方的div重叠。但是，通过将分页的容器设置为margin-top: -49px;，寻呼机下半部分的css无法识别悬停。

经过更多调试后，我发现是否添加：

.under-div:hover{
    background-color: blue;
}

然后将鼠标悬停在我的分页控件的下半部分会触发.under-div

中的蓝色背景

我在此处添加.slick-dots:hover{ background-color: red; }用于演示目的：

以下是代码：

<div class="slick-list draggable">
    <-- here is the carousel -->
</div>

<div class="slick-controls">
    <ul class="slick-dots" style="display: table;bottom: -49px;">
        <li class="slick-active">
            <button type="button" data-role="none">1</button>
        </li>
        <li>
            <button type="button" data-role="none">2</button>
        </li>
    </ul>
</div>

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-controls .slick-dots {
    display: table! important;
    width: auto;
    line-height: inherit;
    position: relative;
    bottom: -25px;
    padding: 10px;
    display: inline-block;
    background-clip: padding-box;
    margin: auto;
    /* opacity: 0; */
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    z-index: 5000;
}
.slick-controls {
    margin-top: -49px;
}

Answer 1

可能发生的事情是你的悬停被旋转木马捕获，而旋转木马正在其余部分上呈现，并且没有理由CSS应该允许下面的内容捕获它，因为下面的内容不是轮播的父母。

如果您的结构如下所示：

<a></a>
<b></b>

其中a与b重叠，其中只有一个会收到悬停。如果b为relative且a为absolute，则a将捕获悬停，例如。

当您的结构如下所示时，这是不同的：

<a>
 <c></c>
</a>
<b></b>

假设c与a重叠，当您将鼠标悬停在c上时，c和a都会捕获该事件。 b的行为方式与上一个例子相同。

没有好办法克服这个问题，除非你想让JS参与其中，在这种情况下你要捕获每个事件并计算你要发送给它的元素，然后添加像{{{ 1}}对他们来说，但这是非常沮丧的。

如果您的轮播显示在您应该能够与之交互的页面的某个部分之上，那么您可能会做错事。