纯css实现网页侧边栏弹窗滑进滑出

这种效果在大多数网站中都是常见的，屏幕右边有一列列表，鼠标放上去之后，列表弹窗就从右边滑出，因为常用自己写一下方便以后直接使用。

效果图

代码

<div class="donate-content-div">
        <strong style="font-weight: bold"> <span id="donate-content-div">使用指南</span></strong>
        <strong style="font-weight: bold"> <span id="content-div-title">搜索</span></strong>
        <div class="content-titles" style="display: block;">
            <div>
                <p style="margin: 0 0 12.5px;">
                 我爱你中国
                </p>
            </div>
        </div>
    </div>

 .donate-content-div:hover{transition:'0.3s all ease-in';right:0}
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .content-titles {
        max-height: 428px;
        position: relative;
        overflow: auto;
    }
    span#content-div-title {
        color: red;
    }
    span#donate-content-div {
        position: absolute;
        left: -63px;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        width: auto;
        background: #ffc82c;
        height: auto;
        top: 21px;
        padding: 7px 14px;
        border-radius: 15px;
        color: #123464;
        font-family: initial;
        font-size: 18px;
    }
    .donate-content-div {
        border: 1px solid #0099d6;
        padding: 20px;
        background-color: #f0f0f0;
        display: inline-block;
        width: 304px;
        right: -304px;
        position: fixed;
        top: 40%;
        z-index: 9999;
        transition: right .35s ease-in-out;
    }