html - 在鼠标悬停时覆盖 div 框的最简单解决方案？

Question

整夜工作仍然没有修复......我有一个链接，当用户将鼠标悬停在它上面时，它应该在链接下显示一个框（div）。该框应覆盖其下方的任何内容。我怎样才能以最简单的方式以纯 CSS 方式做到这一点。

谢谢美味

    body {
    background-color: #6B6B6B;
    background: url(http://wizzfree.com/pix/bg.jpg) fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
    margin: 50px;
} 
    /*............... emojis ...............*/
    
    .emojis {
    position: absolute;
    padding: 25px 15px 10px 20px;
    border-radius: 20px 0px 20px 20px;
    background-color:rgba(0, 0, 0, .3);
}
    .emojis2>img{
    position:absolute;
    left:100%;
    top:0;
}
    .smiley {
    position: absolute;
    top: 25px;
    left: 430px;    
}
    /*... input message ...*/
    
    input[type=text] {
    width: 300px;
    height: 50px;
    border: none;
    outline: none;
    padding-left: 37px;
    font-family: Arial;
    color: white;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.5px;
    background-color:rgba(0, 0, 0, .3);
}

<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><a href="emojis.html"><img src="http://wizzfree.com/pix/smiley2.png" width="40"></a>

<!-- input message -->
<form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>

<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
<div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
<br><p>
<br><p>
<br> <p>
<br> 
</div>

标签： htmlcsstransactionsoverlay

Answer 1

使用纯 CSS，丑陋的 hack 是先隐藏第div一个，然后在鼠标悬停时显示它。由于代码中的唯一链接是href="emojis.html"，因此下面的示例显示带有“emojis.html”文本的移动器 div：

    body {
        background-color: #6B6B6B;
        background: url(http://wizzfree.com/pix/bg.jpg) fixed;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: Arial;
        color: darkgrey;
        font-size: 14px;
        line-height: .3;
        letter-spacing: .5px;
        margin: 50px;
    }

    /*............... emojis ...............*/

    .emojis {
        position: absolute;
        padding: 25px 15px 10px 20px;
        border-radius: 20px 0px 20px 20px;
        background-color: rgba(0, 0, 0, .3);
    }

    .emojis2>img {
        position: absolute;
        left: 100%;
        top: 0;
    }

    .smiley {
        position: absolute;
        top: 25px;
        left: 430px;
    }

    /*... input message ...*/

    input[type=text] {
        width: 300px;
        height: 50px;
        border: none;
        outline: none;
        padding-left: 37px;
        font-family: Arial;
        color: white;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1.5px;
        background-color: rgba(0, 0, 0, .3);
    }
    
    a.special {
        position: relative;
    }

    a.special div.hidediv {
        background-color: white;
        display: none;
        position: absolute;
        z-index: 100;
        width: auto;
        padding: 10 10 10 10;
    }

    a.special:hover div.hidediv {
        display: block;
    }

<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><a href="emojis.html" class="special"><img
            src="http://wizzfree.com/pix/smiley2.png" width="40">
        <div class="hidediv">emojis.html</div>
    </a>


    <!-- input message -->
    <form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>

<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
    <div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
    <br><p>
        <br>
    <p>
        <br> 
    <p>
        <br> 
</div>