将div悬停后无法显示内容

Question

我想解释一下为什么我的思考过程无法正常进行。我知道还有很多其他方法可以实现我想要实现的目标，但是我只想了解为什么它会失败。我将鼠标悬停在"downmenu"之后，希望显示"rightside"的内容。

    .rightside{
        background-color: transparent;
        border: none;
        position: fixed;
        top: 0px; bottom: 0px;
        right: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 95px; 
        transition: 2s;
    }
    .hoverdrop{
        background-color: transparent;
        color: gray;
        font-size: 22px;
        border: none;
        cursor: pointer;
        position: fixed;
        top: 0px; bottom: 0px;
        right: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 95px; 
       
        
        
    }
    .rightside :hover > .langcontent{
        visibility: visible;
        opacity: 1;
    
    }
    .langcontent{
        visibility: hidden;
        opacity: 0;
        position: fixed;
        right: 0px;
        top: 83px;
        background-color: transparent;
        min-width: 95px;
        text-align: center;
        overflow: hidden;
        height: 30px;
        transition: 2s;   
    }
    .langcontent a{
        font-size: 22px;
        color: gray;
        font-family: sans-serif;
    }

<div class="rightside">
                            <button class="hoverdrop">ENG
                            </button>
                            <div id="downmenu" class="langcontent">
                                <a href="esp.html">ESP</a>
                            </div>     
                </div>

Answer 1

您在.rightside :hover中有一个空格。应该是.rightside:hover。

https://jsfiddle.net/Lgb1sxqf/