J'apprends le CSS. J'ai un problème. L'effet de survol devrait fonctionner lorsque la souris survole l'élément de la boîte. lorsque la souris ne survole pas l'élément box, l'élément de contenu est sous l'élément box et doit être masqué. maintenant, je place la souris sous l'élément de la boîte (élément de contenu), l'effet de survol fonctionne toujours. Pourquoi c'est comme ça ? et une solution basée sur mon code?

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>
0
Elias 7 oct. 2019 à 18:22

1 réponse

Meilleure réponse

Les outils de développement sont vos amis. Inspectez l'élément et vous verrez que votre div <div class="content"> est toujours visible sur la page même lorsque vous ne survolez pas. Changer la couleur <p> en noir le révélera.

Solution : ajoutez overflow: hidden à votre classe .box afin que le div .content reste masqué à moins que vous ne survoliez le div .box

.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 */
}
1
jpsweeney94 8 oct. 2019 à 06:03