html - 不使用 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 参与其中，在这种情况下你将捕获每个事件并计算你想将它发送到哪些元素，然后添加一个类，如 。悬停到他们，但这是非常不鼓励的。

如果您的轮播显示在您应该能够与之交互的页面的某些部分的顶部，那么您很可能做错了什么。