悬停效果适用于两个元素，但它应该只适用于唯一的元素

Question

我正在学习CSS。我有一个问题。当鼠标悬停在框元素上时，悬停效果应该起作用。当鼠标不悬停在框元素上时，内容元素位于框元素下方，应该隐藏。现在我将鼠标放在框元素（内容元素）下，悬停效果仍然有效。为什么会这样？以及基于我的代码的任何解决方案？

body {
                margin: 0;
                padding: 0;
                font-family: sans-serif;
            }

            .container {
                width: 1200px;
                height: 300px;
                margin: 240px auto;
                position: relative;
            }

            .container .box {
                position: relative;
                width: calc(400px - 30px);
                height: calc(300px - 30px);
                background-color: #000;
                float: left;
                margin: 15px;
                box-sizing: border-box;
                border-radius: 10px
            }

            .container .box .icon {
                position: absolute;   
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #f00;
                transition: 0.5s;
                z-index: 1;
            }

            .container .box:hover .icon {
                top: 20px;
                left: calc(50% - 40px);
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }          

            .container .box .icon .fas {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 80px;
                color: #fff;
                transition: 0.5s;
            }

            .container .box:hover .icon .fas {
                font-size: 40px
            }

            .container .box .content {
                position: absolute;
                padding: 20px;
                text-align: center;
                box-sizing: border-box;
                top: 100%;
                height: calc(100% - 100px);
                transition: 0.5s;
           
            }

            .container .box:hover .content {
                top: 100px;  
                opacity: 1;  
             
            }

            .container .box .content h3 {
                margin: 0 0 10px;
                padding: 0;
                color: #fff;
                font-size: 24px;
            }

            .container .box .content p {
                margin: 0;
                padding: 0;
                color: #fff;
            }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>

<div class="container">  
       <div class="box">
           <div class="icon"><i class="fas fa-search"></i></div>
            <div class="content">
                <h3>Search</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
           </div>
       </div>
       <div class="box">
           <div class="icon"></div>
       </div>
       <div class="box">
           <div class="icon"></div>
       </div>
    </div>

Answer 1

开发者工具是您的好帮手。检查该元素，您会发现即使您没有将鼠标悬停在页面上，您的 <div class="content"> div 仍然可见。将 <p> 颜色更改为黑色会显示这一点。

解决方案：将 overflow: hidden 添加到 .box class，这样 .content div 将保持隐藏状态，除非您将鼠标悬停在 .box div

.container .box {
    position: relative;
    width: calc(400px - 30px);
    height: calc(300px - 30px);
    background-color: #000;
    float: left;
    margin: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden; /* ADD THIS */
}

悬停效果适用于两个元素，但它应该只适用于唯一的元素

hover effect works on two elements, but it should only work on only element

html

css

hover