前言
最近比较沉迷CSS,所以我现在来做个鼠标的交互效果
HTML

<ul>

<li>测试</li>

<li>测试</li>

<li title="字号">

                    <i class="fa fa-text-height"></i>

                    <div style="transform: translateX(-35%);">

                        <p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置字号</p>

                        <ul>

                            <li>x-small</li>

                            <li>small</li>

                            <li>normal</li>

                            <li>large</li>

                            <li>x-large</li>

                            <li>xx-large</li>

                        </ul>

                    </div>

                </li></ul>

CSS

.EditorMenu ul {

        margin: 0;

        padding: 0px;

        height: 100%;

        display: flex;

        text-align: center;

        margin: 0px 5px;

    }

        .EditorMenu ul li {

            display: block;

            width: 36px;

            line-height: 2.3em;

            position: relative;

        }

            .EditorMenu ul li:hover {

                cursor: pointer;

            }

                .EditorMenu ul li:hover i {

                    color: #000 !important;

                }

                    .EditorMenu ul li:hover i svg path {

                        fill:#000;

                    }

                    .EditorMenu ul li:hover div {

                        z-index: 2;

                        display: block;

                        animation: EditorMenuAnima ease 0.5s forwards;

                    }

@keyframes EditorMenuAnima {

    0% {

        top:-100px;

    }

    30% {

        top: 35px;

    }

    60% {

        top: 20px;

    }

    100% {

        top: 35px;

    }

效果

后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进