Question

所以我正在网站上工作（beta.kylehorkley.com）。最奇怪的事情正在发生。我正在处理侧边栏类型的事情（一旦窗口足够小就会出现）。但是，当我将鼠标悬停在侧栏中的链接上时，侧栏消失，然后在大约一秒后重新出现。这种情况发生在Chrome和Opera中（Firefox和Edge按预期工作）。

补充工具栏HTML：

<div id="sidebar" class="sidebar">
    <a href="/" class="sidelink active">home</a>
    <a href="/contact/" class="sidelink">contact</a>
    <a href="/portfolio/" class="sidelink">portfolio</a>
    <a href="/about/" class="sidelink">about</a>
</div>

补充工具栏CSS：

.sidebar {
    background-color: rgba(255, 255, 255, 0.95);
    height: calc(100% - 91px);
    overflow-x: hidden;
    position: fixed;
        top: 91px; left: 0;
    width: 100%;
    z-index: 999;
}

补充工具栏链接CSS：

.sidelink {
    border-bottom: 3px solid;
    border-bottom-color: transparent;
    color: rgb(50, 125, 150);
    display: block;
    font-family: "Varela Round";
    font-size: 20px;
    font-weight: 400;
    margin: 26px 24px 0 24px;
    opacity: 0.8;
    padding: 0 4px 11px 4px;
    text-transform: uppercase;
    transition: opacity .35s ease;
}

.sidelink:hover {
    opacity: 1;
    transition: opacity .35s ease;
}

.sidelink.active {
    font-weight: bold;
    opacity: 1;
}

Answer 1

而不是改变不透明度，改变颜色，这是有效的（尝试和测试）..这将解决消失的问题..

.sidelink {
    border-bottom: 3px solid;
    border-bottom-color: transparent;
    color:#a9c9d3;
    display: block;
    font-family: "Varela Round";
    font-size: 20px;
    font-weight: 400;
    margin: 26px 24px 0 24px;
    padding: 0 4px 11px 4px;
    text-transform: uppercase;
    transition: all ease 0.3s;
}

.sidelink:hover {
    color: rgb(50, 125, 150);
    transition: all ease 0.3s;
}

使用上面的代码替换您的类。#a9c9d3是将不透明度更改为0.8时的确切颜色。这将解决div消失的问题..

当鼠标悬停在链接上时，Chrome固定div会消失

1 个答案: