list - 将鼠标悬停在按钮上时如何在按钮上显示列表

Question

我有一个按钮，当您将鼠标悬停在它上面时，我想让按钮的名称消失。同时我希望背景改变并在按钮上显示一个列表。

    。纽扣{
            宽度：自动；
            位置：水平；
            字体大小：0；
            背景颜色：darkslategrey；
            边框半径：10px；
            }

        .buttons .btn-1{
            显示：内联块；
            边框半径：8px；
            背景图片：url（“/img/teatritood.JPG”）；
            光标：指针；
            背景尺寸：100%；
            边框：无；
            填充：无；
            高度：30rem；
            宽度：33.3%；
            font-family: 'Courier New'，Courier，等宽；
            颜色：白烟；
            字体显示：粗体；
            字体大小：30px；
            box-shadow: inset 80px 80px 80px darkslategrey, inset -80px -80px 80px darkslategrey;
        }

        .btn-1:悬停{

            背景图片：url（“/img/teatritood.JPG”）；
            光标：指针；
            过渡持续时间：0s；
            背景尺寸：100%；
            边框：无；
            填充：无；
            宽度：30.33%；
            高度：30rem；
            字体大小：0px；
            盒子阴影：无；
            box-shadow: inset 10px 10px 10px darkslategrey, inset -10px -10px 10px darkslategrey;
            }

        .btn-1:hover::after{

            显示：块；
            内容：attr（数据悬停）；
            font-family: 'Courier New'，Courier，等宽；
            颜色：白烟；
            字体显示：粗体；
            字体大小：38px；
            变换：旋转Y（180度）；
        }

<pre>
    <section>
        <div class="buttons">
            <div>
                <button type="button" class=btn-1 data-hover="Uus list">Teatritööd</button>
                <button type="button" class=btn-2 data-hover="Uus list">Näitused</button>
                <button type="button" class=btn-3 data-hover="Uus list">Muud</button>
            </div>
        </div>
    </section>
        <div class="hidden-list">
            <div>
                <ul>
                    <ul><a>Projektid</a></ul>
                    <ul>Kirjeldused</ul>
                    <ul>Pildid</ul>
                </ul>
             </div>
         </div>
    </pre>

标签： listbuttonhover