CSS高级悬停效果？ [关闭]答案

【问题标题】：CSS advanced hover effect? [closed]CSS高级悬停效果？ [关闭]
【发布时间】：2021-07-28 06:48:33
【问题描述】：

我对编码还很陌生，这是我在 Github 上的第二个 repo！我想做一个特定的悬停效果。我有一个定制设计的 PNG 格式字体，我想在悬停时显示为覆盖。如果字体是 TTF 格式，那就太容易了……但它是在 Illustrator 中手绘和编辑的。我想在同一页面上应用此效果的 12 个点击框，是否可以在悬停时使用 PNG？到目前为止，我只将我的 CSS 设置为基本的 2px 线条或颜色叠加悬停效果，如下所示：

div.clickBox-Ministries:hover{
border-bottom: 2px solid white;
}

或

div.clickBox-Ministries:hover{
background-color: #1380BB
opacity: 0.3;
cursor: crosshair;
}

有什么想法吗？

【问题讨论】：

标签： javascript html css github

【解决方案1】：

我认为您正在寻找的是这样的选择器： .common-parent:hover .png-overlay{}

您还需要使用position:absolute、top:0 和z-index:1 来获得正确的定位。

别忘了position:relative父元素

这是一个演示，可以更好地解释这一点：

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="stackoverflow.css" />
        <title>Document</title>
    </head>

    <body>
        <style>
            .clickBox-Ministries, 
            .png-overlay {
                

                width:500px;
                height:200px;
            }
            .clickBox-Ministries{
                background-color: aqua;
            
            }
            .png-overlay{
                background-color: bisque;
            } 
            .png-overlay{
                /* good practice to hide elements with display none. prevents screen reader from still reading it*/
                display:none;

                /* puts */
                position:absolute;
                top:0;
                z-index:1;

                opacity:0;
            }
            .common-parent{
                /* prevents any child elements with position:absolute; from being positioned relative to body element instead of it's the parent object */
                position:relative;
            }
            .common-parent:hover .png-overlay{
                /* reset display from previously being hidden */
                display:inline;
                
                opacity:1;
                /* makes the transition smooth --- really handy to know this property */
                transition: opacity 0.1s ease-in-out;
            }


        </style>

        <div class="common-parent">
            <div class="clickBox-Ministries">

            </div>
            <img class="png-overlay" />
        </div>



    </body>

    </html>

【讨论】：