悬停时侧边栏不出来

Question

当鼠标悬停在“产品”类上时，我希望侧边栏出现

<div class="sidebar">
<nav class="sidebar-nav">
    <ul>
        <li><a href="#">Overview</a></li>
        <li><a href="#">Website Analytics</a></li>
        <li><a href="#">Connected Services</a></li>
        <li><a href="#">About Me</a></li>
    </ul>
</nav>
</div>
    <div class="main-back">
        <h5>Get Your Own Website <span>Now.</span> </h5>
<p>With Little Investment You can Get High End Website <br> With Responsiveness.</p>
<a href="#" class="order-now"> Order-Now</a>
<div class="icons">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
    </div>
<header>
    <h3 class=".logo"><i class="fab fa-pied-piper-square"></i>SKILLREP</h3>
    <nav class="navigation1">
        <ul>
            <li><a href="#" class=".product">PRODUCT <i class="fas fa-chevron-down"></i></a></li>
            <li><a href="#">TEMPLATE <i class="fas fa-chevron-down"></i></a></li>
            <li><a href="#">RESOURCE <i class="fas fa-chevron-down"></i></a></li>
        </ul>
    </nav>

我将侧边栏放在顶部：-40px 使用绝对位置，当我将鼠标悬停在没有出现在主页中的产品上时，它变得不可见。

body .sidebar{
    width: 100%;
    height: 30vh;
    background-color: black;
    position: absolute;
    top: -30vh;
}
.sidebar .sidebar-nav ul{
    display: block;
    margin-left: 38vw;
    margin-top: 10vh;
}
.sidebar .sidebar-nav ul li a{
    color: white;
    line-height: 30px;
    font-family: 'poppins',sans-serif;
}

body header .navigation1 ul li a:hover .sidebar{
    top: 30vh;
}

Answer 1

虽然按照Change other Div style on hover可以实现

我不建议这样做。更好的方法是使用 Javascript 来实现效果。 首先使用 display:none; 隐藏侧边栏；在 CSS 中，然后通过 JS 动态更改。

function displaySidebar(x){
x.style.display="block";
}

<div class="sidebar" onmouseover="displaySidebar(this)">
        <nav class="sidebar-nav">
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Website Analytics</a></li>
                <li><a href="#">Connected Services</a></li>
                <li><a href="#">About Me</a></li>
            </ul>
        </nav>
        </div>