при наведении курсора div элементы внутри немного смещаются сверху и снизу

ProgramBox

при наведении курсора div элементы внутри немного смещаются сверху и снизу

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

У меня есть список фильмов. Когда вы наведете курсор на фильм, вокруг фильма появится граница, это нормально, но в то же время, если вы наведете курсор на фильм, вы почувствуете, что добавляете дополнительные отступы в «верх» и » низ » и перемещаете div.item.

Как я могу это исправить?

Нажмите на «полную страницу» во фрагменте кода, чтобы увидеть, что я имею в виду.

 @import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900amp;display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300amp;display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas Neueamp;display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.wrapper {
    position: relative;
    width: auto;
    height: 100vh;
    padding: 15px;
    font-size: 1.1em;
    top: 0;
}

.content-wrapper {
    margin-top: 110px;
    margin-bottom: 30px;
    margin-left: 170px;
}

.header-menu {
    display: flex;
    /*align-items: flex-start;*/
    /*justify-content: left;*/
    font-size: 18px;
}

.header-item ~ .header-item {
    margin-left: 100px;
}

li.active {
    border-bottom: 2.5px solid #E3AA1E;
}

li.active a {
    color: #E2E2E2;
}

.header-item a {
    color: #9f9f9f;
}

.content-wrapper li {
    list-style-type: none;
}

.list-menu {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 40px;
    background-color: var(--body-bg);
    border-radius: 5px;
    border: 25px solid var(--body-bg);
}

.item:hover {
    background-color: #36414B;
    border-color: #36414B;
    border-radius: 15px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.item a {
    color: unset;
}

.item img {
    width: 250px;
    height: 380px;
}

.item-name {
    font-weight: 500;
    font-size: 14px;
    white-space: normal;
    width: 85%;
    margin-top: 5px;
}

.item-time {
    margin-top: 3px;
    color: #9F9F9F;
    font-size: 13px;
    font-weight: 500;
}

.label {
    display: inline;
    padding: .2em .5em .25em;
    font-size: 70%;
    font-weight: 700;
    line-height: 1;
    color: #ccc;
    background-color: var(--box-bg);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .30em;
}

.label-yellow {
    background-color: #008080;
}

.item-description {
    display: none;
}

.item:hover .item-description {
    display: block;
}

 <div class="wrapper">
    <div class="content-wrapper">
        <div class="content-header">
            <ul class="header-menu">
                <li class="header-item"><a href="#">Popular</a></li>
                <li class="header-item active"><a href="#">New Releases</a></li>
                <li class="header-item"><a href="#">Recently Added</a></li>
                <li class="header-item"><a href="#">Recommanded</a></li>
            </ul>
        </div>
        <div class="list-menu">
            <div class="item">
                <a href="#">
                    <img src="https://wallpapercave.com/wp/wp7248999.jpg" alt="">
                    <div class="item-name">Batman</div>
                    <div class="item-time">1 hr 43 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="https://i.pinimg.com/originals/fb/ff/84/fbff84ea4b51cf1524c2a95fdac2183e.jpg" alt="">
                    <div class="item-name">The Flash</div>
                    <div class="item-time">2 hr 53 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src=https://m.media-amazon.com/images/M/MV5BYWQyZGQwMzktMjFhYS00MmZmLWI3ZDEtNzg3MzRmM2ZjMDc1XkEyXkFqcGdeQXVyODY5NzkyMjA@._V1_.jpg" alt="">
                    <div class="item-name">Scooby-Doo: The Sowrd and The Scoob</div>
                    <div class="item-time">1 hr 25 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="https://m.media-amazon.com/images/M/MV5BZWRhMzdhMzEtZTViNy00YWYyLTgxZmUtMTMwMWM0NTEyMjk3XkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_.jpg" alt="">
                    <div class="item-name">X-MEN: Wolverine</div>
                    <div class="item-time">2 hr 46 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src=https://m.media-amazon.com/images/M/MV5BYWQyZGQwMzktMjFhYS00MmZmLWI3ZDEtNzg3MzRmM2ZjMDc1XkEyXkFqcGdeQXVyODY5NzkyMjA@._V1_.jpg" alt="">
                    <div class="item-name">Scooby-Doo: The Sowrd and The Scoob</div>
                    <div class="item-time">1 hr 25 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="https://m.media-amazon.com/images/M/MV5BZWRhMzdhMzEtZTViNy00YWYyLTgxZmUtMTMwMWM0NTEyMjk3XkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_.jpg" alt="">
                    <div class="item-name">X-MEN: Wolverine</div>
                    <div class="item-time">2 hr 46 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src=https://m.media-amazon.com/images/M/MV5BYWQyZGQwMzktMjFhYS00MmZmLWI3ZDEtNzg3MzRmM2ZjMDc1XkEyXkFqcGdeQXVyODY5NzkyMjA@._V1_.jpg" alt="">
                    <div class="item-name">Scooby-Doo: The Sowrd and The Scoob</div>
                    <div class="item-time">1 hr 25 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="https://m.media-amazon.com/images/M/MV5BZWRhMzdhMzEtZTViNy00YWYyLTgxZmUtMTMwMWM0NTEyMjk3XkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_.jpg" alt="">
                    <div class="item-name">X-MEN: Wolverine</div>
                    <div class="item-time">2 hr 46 min</div>
                    <div class="item-description">
                        <span class="label label-yellow">2021</span>
                        <span class="label">Action</span>
                        <span class="label">Justice</span>
                        <span class="label">Hero</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

                   
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Ответ №1:

Это связано с

 .item-description {
    display: none;
}

.item:hover .item-description {
    display: block;
}

Скрытие с помощью display удаляет элемент из макета. Используйте visibility вместо этого, и элементы всегда будут занимать место. Если это увеличивает высоту карты, вы можете настроить margin ее вокруг карты.

Ответ №2:

Это связано с тем, что вы показываете дополнительные «теги» контента в div при наведении курсора, это увеличит высоту блока, поэтому он будет нажимать на нижеприведенные элементы вниз.

Попробуйте использовать видимость вместо отображения для этого подраздела:

 .item-description {
    visibility: hidden;
}

.item:hover .item-description {
    visibility: visible;
}