эффект наведения работает на два элемента, но он должен работать только на один элемент - PullRequest
Новая
       14

эффект наведения работает на два элемента, но он должен работать только на один элемент

0 голосов
/ 07 октября 2019

Я изучаю CSS. У меня есть одна проблема. эффект наведения должен работать, когда мышь наводит курсор на элемент box. когда мышь не находится над элементом box, элемент содержимого находится под элементом box и должен быть скрыт. Теперь я поместил мышь под элементом box (content content), эффект наведения все еще работает. Почему это так? и какое-либо решение на основе моего кода? 

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>

1 Ответ

1 голос
/ 08 октября 2019

Инструменты разработчика - ваш друг. Осмотрите элемент, и вы увидите, что ваш <div class="content"> div все еще виден на странице, даже если вы не парите. Изменение цвета <p> на черный покажет это.

Решение: Добавьте overflow: hidden к своему классу .box, чтобы div .content оставался скрытым, если вы не наведите курсор мыши на .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 */
}
...