Question

我正在通过html和css3制作定价表。但是当我悬停非活动部分时面临问题以停用活动悬停部分。

在预览网站中有一个特色部分名称＆＃34;标准＆＃34;和它的-15px顶部正确突出显示但我想在我悬停其他部分时将其从顶部变为0px。以及当我没有将任何部分悬停在＆＃34;标准＆＃34;部分保持-15px顶部。请帮帮我。

Answer 1

在父容器上使用:hover行为作弊。

例如

HTML：

<main>
    <div></div>
    <div class="default"></div>
    <div></div>
    <div></div>
</main>

短CSS例如：

div {
    position:relative;
    top:15px;
    transition:top 500ms;
}
div:hover, div.default {
    top:0;
}
main:hover div.default:not(:hover) {
    top:15px;
}

如果容器悬停，但最后一条规则会重置默认元素的位置，但默认元素不是 - 因此它必须超过另一个价格。

Sample fiddle

部分悬停由CSS3激活和非活动

1 个答案: