Question

因此，当我在悬停时，我尝试使用下方的选项进行下拉，这些选项会溢出到下一部分。此时，用户应该可以单击立即加入/了解更多。除了他们向下移动的那一刻，按钮消失了。

我的代码如下所示：

这是HTML：

<div class="partner-boxes">
<div class="partner-box green">
            <div class="partner-box-header text-uppercase">
                New<br /> Partners
            </div>
            <div class="partner-buttons">
                <a href="#">Join Now</a>
                <a href="#">Learn More</a>
            </div>
        </div>

这里是CSS：

.partner-boxes {
float: right;}

div.partner-box {
float: left;
position: relative;
.partner-box-header {
    font-size: 28px;
    font-weight: bold;
    padding: 22px;
    line-height: 24px;
    margin: 0 0 -52px;
}
&.green .partner-box-header {
    background: rgba(108, 192, 74, .65);
}
a {
    border: 1px solid #fff;
    color: #fff;
    display: block;
    font-size: 16px;
    margin: 9px 0;
    padding: 9px 0;
    text-align: center;
}
.partner-buttons {
    padding: 13px 22px;
    display: none;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 92px;
    min-height: 140px;
    a:hover {
        text-decoration: none;
        background-color: rgba(255, 255, 255, .1);
    }
}
&:hover {
    .partner-buttons {
        display: block;
    }
}
&.green .partner-buttons {
    background: rgba(108, 192, 74, 1);
}
&.light-blue .partner-buttons {
    background: rgba(79, 193, 224, 1);
}


.partner-button {
border: 1px solid #fff;
color: #fff;
display: inline-block;
font-size: 16px;
margin: 9px 0 30px;
padding: 9px 30px;
text-align: center;
&:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, .1);
}
}

.find-a-partner {
padding: 40px 0;
h2 {
    color: #3e8ede;
    margin-bottom: 1em;
}
.partner {
    width: 338px;
    height: 131px;
    float: left;
    border: 1px solid #3e8ede;
    text-align: center;
    margin: 0 0 28px 0;
    max-width: 100%;
    img {
        max-height: 100px;
        @include vertical-align();
    }
}
}

@media screen and (max-width:767px) {
//sm-devices    & hamburger menu activated
.banner.partner {
    background: #3e8ede;
    max-height: none;
    h1 {
        text-shadow: none;
        color: #fff;
    }
}
.partner-boxes {
    float: none;
    margin: 50px 0 0;
    .partner-box {
        float: left;
        width: 30%;
        border: 1px solid #fff;
        &.airclass-blue {
            border: 1px solid #fff;
        }
        &.green .partner-box-header {
            background: rgba(108, 192, 74, 1);
        }
        .partner-box-header {
            margin: 0px;
        }
        .partner-buttons {
            display: block;
            margin-bottom: 30px;
            position: relative;
            top: 0;
        }
    }
}
}

@media screen and (max-width:600px) {
.partner-boxes {
    float: none;
    margin: 50px 0 0;
    .partner-box {
        float: left;
        width: 50%;
    }
}
}

@media screen and (max-width:480px) {
// col-xs
.partner-boxes {
    .partner-box {
        float: none;
        width: 100%;
    }
}
.benefits {
    .benefit {
        width: 100%;
        margin: 16px 0;
    }
}
.contact-channel-team {
    text-align: center;
    .container {
        background-image: none;
    }
}
}

我不知道如何让悬停物品坚持下去。我试过调整合作伙伴盒子上的位置，这只会大大搞砸了设计。有什么想法吗？

Answer 1

更改此部分：

.partner-buttons {
    padding: 13px 22px;
    display: none;
    width: 100%;
    z-index: 2;
    position: absolute;
    top: 69px;
    min-height: 140px;
    a:hover {
        text-decoration: none;
        background-color: rgba(255, 255, 255, .1);
    }
}
&:hover {
    .partner-buttons {
        display: block;
    }

差距造成了这个问题，所以我将顶部间距从92减少到69px。

如何让悬停下拉列表保持活动状态以便点击？

1 个答案: