主页 / user-565382

TopTTeDHbIu-DeJLbFuH4uk's questions

Martin Hope
TopTTeDHbIu-DeJLbFuH4uk
Asked: 2024-12-19 22:10:18 +0000 UTC
  • 4

大家好。如何定位屏幕截图中所示的元素？请注意，使用绝对定位或translateX() 函数不会产生所需的结果。页眉应该是橡胶的，也就是说，缩放时，文本会收缩到页面的左侧。当使用上述方法时，遗憾的是，结果是否定的。在此输入图像描述

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iRobot</title>
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
    <!-- STYLES -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/colors.css">
    <link rel="stylesheet" href="styles/header.css">
</head>
<body>
<div class="header-container">
<!--    <div class="header">-->
        <div class="header-carousel">
            <div class="carousel-item">Order by 12/19/24 at 11:59 PM EST for 2-day shipping on all robot orders for
                delivery
                by 12/24/24.
                <a href="https://www.irobot.com/en_US/deals.html" target="_blank">Select preferred shipping option at
                    checkout.</a></div>
            <div class="carousel-item carousel-item-hidden">New Markdown: 45% off the Roomba Combo® i5+ Self-Emptying
                Robot
                Vacuum and Mop. <a href="https://www.irobot.com/en_US/roomba-combo-i5-series-robot-vacuum-and-mop/Roomba-Combo-i5-Series-Robots.html">Shop Deal</a>
            </div>
        </div>
        <div class="header-link">
            <a href="https://homesupport.irobot.com/s/">Support</a>
            <a href="https://www.irobot.com/en_US/login">Order Status</a>
            <a href="https://www.irobot.com/en_US/login">Login</a>
            <span class="header-language">English (United States)</span>
        </div>
<!--    </div>-->
</div>

<script src="scripts/header.js"></script>
</body>
</html>

CSS：

.header-container {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    background-color: var(--background-header);
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.header-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: clamp(100px, 100%, 500px);
}

.carousel-item {
    text-align: center;
}

.carousel-item-hidden {
    display: none;
}
html
Martin Hope
TopTTeDHbIu-DeJLbFuH4uk
Asked: 2023-10-28 15:10:36 +0000 UTC
  • 5

在屏幕截图中，我用箭头显示了不规则之处。其他卡都正常。另外，当进行房屋搜索时，该异常区域被转移到另一个地方，而其他所有区域的行为都与预期一致，为什么这张特定的卡有这种行为？怎么修？异常

HTML：

<div class="main-container-trading">
<div class="container-modal-row">
    <div class="modal-row-text">модельный ряд lofthaus</div>
    <div class="container-btn-params">
        <div class="btn-params-text">Подбор дома
            <div class="container-svg-icon-params">
                <svg></svg>
            </div>
        </div>
    </div>
    <!--  Modal window selection house  -->
    <div class="container-modal-window-selection-house">
        <button class="svg-icon-close-modal-window-selection-house">
            <svg></svg>
        </button>
        <div class="modal-window-selection-house">
            <div class="price-selection-house">цена, ₽</div>
            <div class="container-select-prices">
                <div class="input-label">
                    <div class="from-to">от</div>
                    <input class="input filter-input" type="number" placeholder="1 000 000" id="price-from">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите цену от</div>
                </div>
                <div class="input-label">
                    <div class="from-to">до</div>
                    <input class="input filter-input" type="number" placeholder="15 000 000" id="price-to">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите цену до</div>
                </div>
            </div>
            <div class="square-selection-house">площадь, м2</div>
            <div class="container-select-square">
                <div class="input-label">
                    <div class="from-to">от</div>
                    <input class="input filter-input" type="number" placeholder="50" id="area-from">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите площадь от</div>
                </div>
                <div class="input-label">
                    <div class="from-to">до</div>
                    <input class="input filter-input" type="number" placeholder="250" id="area-to">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите площадь до</div>
                </div>
            </div>
            <div class="container-btn-apply">
                <div class="btn-apply">Применить</div>
            </div>
            <div class="container-btn-reset hidden-btn-reset">
                <div class="btn-reset">Сбросить</div>
            </div>
        </div>
    </div>
    <!--  Modal window selection house  -->
</div>
<section class="container-items">
    <template>
    <div class="item">
        <img src="" alt="item-1">
        <div class="item-details">
            <div class="model-house"></div>
            <div class="container-info">
                <div class="price-house"></div>
                <div class="size-house"></div>
            </div>
            <div class="container-buttons">
                <div class="btn-more-detailed">
                    <div class="btn-style-more-detailed">Подробнее</div>
                </div>
                <div class="btn-presentation">
                    <div class="btn-style-presentation">Презентация
                        <div class="container-svg-icon-pdf">
                            <svg></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </template>
</section>
<div class="container-show-all-houses">
    <button class="show-all-houses">+ Все дома</button>
</div>
<div class="no-results-message hidden-message">По вашему запросу дома не найдены. Попробуйте изменить параметры и повторить поиск заново.</div>

CSS：

    .main-container-trading {
    background-color: #6a6a6a;
    padding-left: 145px;
}


.container-modal-row {
    position: relative;

    display: flex;
    justify-content: space-between;

    border-left: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;

    padding: 80px 40px 50px 150px;
    margin-right: 146px;
}

.modal-row-text {
    color: white;
    font-size: 40px;
    font-weight: 400;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 83px;
}

.container-btn-params {
    display: flex;
    align-self: center;
    height: 40px;
    width: 220px;

    border: 1px solid #c8b197;
    border-radius: 50px;

    transition: all .3s ease-in-out;

    cursor: pointer;
}

.container-btn-params:hover {
    transition: all .3s ease-in-out;
    border: 1px solid #8a7565;
}

.btn-params-text {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;

    color: white;
    font-size: 20px;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 29px;
}

.container-svg-icon-params {
    display: flex;
    height: 100%;
    align-items: center;
}

.container-modal-window-selection-house {
    position: absolute;
    right: 40px;
    top: 165px;

    width: 450px;
    background-color: #ffffff;
}

.svg-icon-close-modal-window-selection-house {
    position: absolute;
    right: 5px;
    top: 10px;

    border: none;
    background: transparent;

    display: flex;
    width: fit-content;
    height: fit-content;

    cursor: pointer;
}

.modal-window-selection-house {
    padding-top: 25px;
    padding-left: 30px;
    margin-right: 30px;
    margin-bottom: 25px;
}

.price-selection-house {
    font-family: sans-serif;
}

.container-select-prices {
    display: flex;
    gap: 10px;
    width: 100%;
    padding-top: 5px;
}

.input-label {
    display: flex;
    flex-direction: column;
}

.from-to {
    margin-bottom: 3px;

    color: #b7b7b7;
    font-family: sans-serif;
    cursor: default;
}

.input {
    width: 170px;
    border: none;
    outline: none;
    background-color: #e2e2e2;
    padding: 5px 10px;
}

.hidden-filter-invalid-msg {
    display: none;
}

.filter-invalid-msg {
    color: #ff0000;
    font-family: sans-serif;
    font-size: 14px;
    padding-top: 5px;
}

.square-selection-house {
    padding-top: 25px;
    font-family: sans-serif;
}

.container-select-square {
    display: flex;
    gap: 10px;
    padding-top: 5px;
    margin-bottom: 20px;
}

.container-btn-apply {
    width: 100%;
    height: 40px;
    background-color: #c8b197;

    cursor: pointer;
}

.btn-apply {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}

.container-btn-reset {
    display: flex;
    justify-content: center;
    width: 100%;

    padding-top: 15px;

    cursor: pointer;
}

.hidden-btn-reset {
    display: none;
}

.btn-reset {
    color: #000000;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}


.container-items {
    display: flex;
    flex-wrap: wrap;
    border-right: 1px solid #b0b0b0;
    border-left: 1px solid #b0b0b0;
}

.item {
    display: flex;
    flex-direction: column;

    max-width: 536px;
    background-size: cover;
    border-right: 1px solid #b0b0b0;
}

.item > img {
    max-width: 100%;
    max-height: 100%;
}

.item-details {
    display: flex;
    flex-direction: column;
    padding: 40px 40px;
    border-bottom: 1px solid #b0b0b0;
}

.model-house {
    font-size: 36px;
    line-height: 49px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    font-family: sans-serif;

    transition: all 0.3s ease;

    cursor: pointer;
}

.model-house:hover {
    transition: all 0.3s ease;
    color: #c8b17a;
}

.container-info {
    display: flex;
    justify-content: space-between;
}

.price-house {
    display: flex;
    justify-content: space-between;

    color: white;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 75px;
    font-size: 36px;
}

.size-house {
    color: #DE0D0D;
    font-weight: 700;
    line-height: 78px;
    font-size: 36px;
    font-family: sans-serif;
}

.container-buttons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
}

.btn-more-detailed {
    width: 150px;
    height: 55px;
    border: 3px solid #c8b197;

    cursor: pointer;
}

.btn-style-more-detailed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 18px;
    text-transform: uppercase;

    transition: all .3s ease-in-out;
}

.btn-more-detailed:hover .btn-style-more-detailed {
    transition: all .3s ease-in-out;
    background-color: #c8b197;
    color: #000000;
}

.btn-presentation {
    background-color: #c8b197;
    width: 205px;
    height: 60px;

    cursor: pointer;
}

.btn-style-presentation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 10px;

    color: #000000;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 18px;
}

.container-svg-icon-pdf {
    display: flex;
}


.container-show-all-houses {
    text-align: center;
    margin-right: 146px;

    padding-top: 40px;
    border-left: 1px solid #b0b0b0;
    /*border-top: 1px solid #b0b0b0;*/
    border-right: 1px solid #b0b0b0;
}

.show-all-houses {
    background: transparent;
    border: none;
    padding: 0;

    margin-bottom: 30px;

    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
    font-family: sans-serif;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;

    transition: all .3s ease-in-out;

    cursor: pointer;
}

.show-all-houses:hover {
    transition: all .3s ease-in-out;
    border-bottom: 1px solid #c8b197;
    color: #c8b197;
}

.hidden {
    display: none;
}


.no-results-message {
    padding: 40px 35px;
    margin-right: 146px;
    text-align: center;

    border-left: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;

    color: #ffffff;
    font-family: sans-serif;
}

.hidden-message {
    display: none;
}

JS：

const allHouses = [
    {
        id: 1,
        title: 'LOFTHAUS R70',
        price: 4465000,
        area: 70,
        img: 'https://topttedhbiu-dejlbfuh4uk.github.io/Layout_LoftHouse/images/item-1.jpg',

    },
// Добавьте тут ещё 10 домов, на меня кричат из-за спама
];

const containerBtnApplyEl = document.querySelector('.container-btn-apply');
const containerBtnResetEl = document.querySelector('.container-btn-reset');
const filterInputEls = [...document.querySelectorAll('.filter-input')];
const filterInvalidMsgEls = [...document.querySelectorAll('.filter-invalid-msg')];
const templateEl = document.querySelector('section > template');
const containerItemEls = document.querySelector('.container-items');

const addPointToNumber = (house) => {
    house.price = new Intl.NumberFormat('ru-RU', {}).format(house.price).replace(/\s/g, '.');
};

const renderHouse = (house, index) => {
    const houseTemplate = templateEl.content.firstElementChild.cloneNode(true);

    if (index >= 9) {
        houseTemplate.classList.add('hidden');
    }

    houseTemplate.querySelector('img').src = house.img;
    houseTemplate.querySelector('.model-house').innerText = house.title;
    addPointToNumber(house);
    houseTemplate.querySelector('.price-house').innerText = `${house.price} ₽`;
    houseTemplate.querySelector('.size-house').innerText = `${house.area}м2`;

    containerItemEls.append(houseTemplate);
};

allHouses.forEach((house, index) => {
    renderHouse(house, index);
});

const showAllHousesEl = document.querySelector('.show-all-houses');
const hiddenHouseEls = [...document.querySelectorAll('.hidden')];
const containerShowAllHousesEl = document.querySelector('.container-show-all-houses');
const buttonEl = document.querySelector('.container-show-all-houses > button');

showAllHousesEl.addEventListener('click', () => {
    hiddenHouseEls.forEach(hiddenHouse => {
        hiddenHouse.classList.remove('hidden');
    });
    buttonEl.remove();
    containerShowAllHousesEl.classList.remove('container-show-all-houses');
});

const clearContainerItemEls = () => {
    [...containerItemEls.children].forEach(el => el.remove());
};

const getHouses = (filters) => {
    const response = allHouses.filter(house => {

        // house.price = house.price.replace(/\./g, '');
        // house.price = parseInt(house.price, 10);

        for (const filterKey in filters) {
            const filterVal = filters[filterKey];
            switch (filterKey) {
                case 'price': {
                    if (house.price < filterVal.from) return false;
                    if (house.price > filterVal.to) return false;
                    break;
                }
                case 'area': {
                    if (house.area < filterVal.from) return false;
                    if (house.area > filterVal.to) return false;
                    break;
                }
            }
        }
        return true;
    });
    return response.length ? response : null;
};

const isValidFilterInputEl = (filterInputEl) => {
    return !!filterInputEl.value || filterInputEl.value === 0;
};

const validateFilterInputEl = (filterInputEl) => {
    const isValid = isValidFilterInputEl(filterInputEl);
    filterInputEl.filterInvalidMsgEls.classList.toggle('hidden-filter-invalid-msg', isValid);
    return isValid;
};

filterInputEls.forEach((filterInputEl, index) => {
    filterInputEl.filterInvalidMsgEls = filterInvalidMsgEls[index];

    filterInputEl.addEventListener('input', () => {
        validateFilterInputEl(filterInputEl);
    });
});

const applyElClickHandler = () => {

    filterInputEls.forEach(filterInputEl => {
        if (!validateFilterInputEl(filterInputEl)) {
            return false;
        }
    });

    const filters = {};
    filterInputEls.forEach(filterInputEl => {
        const [filterKey, filterSubKey] = filterInputEl.id.split('-');
        const filter = filters[filterKey] = filters[filterKey] || {};
        filter[filterSubKey] = filterInputEl.value;
    });

    const houses = getHouses(filters);

    clearContainerItemEls();
    buttonEl.remove();
    containerShowAllHousesEl.classList.remove('container-show-all-houses');

    if (!houses) {
        const noResultsMessageEl = document.querySelector('.no-results-message');
        noResultsMessageEl.classList.remove('hidden-message');
        return false;
    }

    houses.forEach(house => {
        renderHouse(house);
    });
};
javascript
Martin Hope
TopTTeDHbIu-DeJLbFuH4uk
Asked: 2023-10-09 21:23:10 +0000 UTC
  • 6

当您单击“圣彼得堡”时，应该打开一个模态窗口，但是，问题是我同时创建和删除了“活动”类，它负责此操作，我如何避免删除它，从而在任何地方关闭模态单击除自身之外的窗口？代码：

<div class="container-header">
    <div class="container-header-logo">В этом блоке удалил часть кода а то не вмещается</div>
    <div class="container-header-right">
        <div class="container-header-navigation">
            <div class="container-header-upper">
                <div class="header-mark-city">
                    <svg width="23" height="23" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.255 14.8411C9.70747 14.8411 8.44128 13.5504 8.44128 11.9729C8.44128 10.3954 9.70747 9.10466 11.255 9.10466C12.8026 9.10466 14.0688 10.3954 14.0688 11.9729C14.0688 13.5504 12.8026 14.8411 11.255 14.8411ZM19.6963 12.2597C19.6963 7.05388 15.9681 3.36822 11.255 3.36822C6.54199 3.36822 2.81376 7.05388 2.81376 12.2597C2.81376 15.6155 5.55717 20.0613 11.255 25.3675C16.9529 20.0613 19.6963 15.6155 19.6963 12.2597ZM11.255 0.5C17.1639 0.5 22.5101 5.11783 22.5101 12.2597C22.5101 17.0209 18.7537 22.657 11.255 29.1822C3.75637 22.657 0 17.0209 0 12.2597C0 5.11783 5.34614 0.5 11.255 0.5Z"
                              fill="#C8B197"></path>
                    </svg>
                </div>
                <span class="header-city">Санкт-Петербург</span>
                <span class="header-upper-number-phone">+7 (931) 342-95-05</span>
            </div>
            <!--     Modal window       -->
            <div class="container-header-popup-change-city">
                <div class="popup-header-city">Ваш город</div>
                <div class="container-header-popup-svg-icon-moscow">
                    <svg class="popup-icon-moscow" width="31" height="42" viewBox="0 0 41 52" fill="none"
                         xmlns="http://www.w3.org/2000/svg">-->
                        <path d="M38.1061 38.5057V42.7118H37.515V38.5057H34.621V42.7118H34.0299V38.5057H31.1448V42.7118H30.289C30.289 41.3416 30.289 39.9713 30.289 38.5924C30.2714 38.5837 30.2449 38.5837 30.2272 38.575C29.5832 39.98 28.9479 41.3936 28.3039 42.7985C28.2774 42.7899 28.2509 42.7812 28.2156 42.7725C28.2156 39.8586 28.2156 36.9533 28.2156 33.9787C27.501 33.9787 26.8216 33.9787 26.1422 33.9787C25.5776 31.4897 25.0306 29.0614 24.4835 26.6244C23.6101 22.7738 22.7366 18.9233 21.8631 15.0727C21.3602 12.8699 20.8573 10.6584 20.3544 8.45564C20.4691 8.51634 20.5838 8.57705 20.6897 8.64643C21.6073 9.28819 22.5337 9.93863 23.4513 10.5804C23.5836 10.6671 23.7071 10.7625 23.8395 10.8492C23.8659 10.8319 23.8924 10.8145 23.9189 10.8059C23.4954 9.47031 23.0631 8.13476 22.6307 6.76451C23.8042 5.90594 24.96 5.06471 26.1246 4.21481C25.9481 4.14543 25.7981 4.14543 25.657 4.14543C24.4835 4.13676 23.3101 4.12809 22.1278 4.12809C21.8455 4.12809 21.722 4.03269 21.6337 3.77252C21.2808 2.67111 20.9014 1.58706 20.5309 0.49433C20.4779 0.346898 20.4162 0.208139 20.328 0C19.8427 1.43095 19.3839 2.77518 18.9075 4.16278C17.4517 4.16278 16.0224 4.16278 14.6019 4.16278C14.5931 4.18879 14.5931 4.21481 14.5842 4.24083C15.74 5.08205 16.887 5.91461 18.0516 6.76451C17.6105 8.14343 17.1782 9.49633 16.7194 10.936C17.1341 10.6411 17.4693 10.4069 17.8046 10.1815C18.634 9.60907 19.4633 9.03669 20.2927 8.47298C20.2838 8.55971 20.2838 8.64643 20.2662 8.73316C19.4457 12.3756 18.6163 16.018 17.7958 19.6518C16.8606 23.7885 15.9253 27.9166 14.9901 32.0534C14.8401 32.6951 14.6901 33.3369 14.5313 34.0133C13.8255 34.0133 13.1638 34.0133 12.4579 34.0133C12.4579 36.936 12.4579 39.8239 12.4579 42.7031C12.4315 42.7118 12.3962 42.7205 12.3697 42.7292C11.7433 41.3416 11.108 39.9626 10.4463 38.497C10.4463 39.9106 10.4463 41.3069 10.4463 42.7031H9.85518V38.497H6.97009V42.7031H6.37895V38.497H3.48504V42.7031H2.89391V38.497H0V42.7031V43.5357V52H10.4463C10.8522 52 11.2492 52 11.655 52C17.4429 52 23.2042 52 28.9744 52C29.4155 52 29.8479 52 30.289 52H41V43.5357V42.7031V38.497H38.1061V38.5057Z"
                              fill="#C8B197"></path>
                    </svg>
                    <div class="popup-header-moscow">Москва</div>
                </div>
                <div class="container-header-popup-svg-icon-saint-petersburg">
                    <svg class="popup-icon-saint-petersburg" width="29" height="42" viewBox="0 0 39 52" fill="none"
                         xmlns="http://www.w3.org/2000/svg">-->
                        <path d="M38.2989 44.2195L32.293 33.612L29.6914 27.1887L26.8954 15.9934L24.3951 12.9416L24.5218 9.10324L23.7109 4.03724L23.9727 1.5734L22.2917 0L20.4841 1.95378V4.26201L19.5042 5.14381L18.026 7.73732L17.7135 7.07165L18.3554 5.20432L16.9532 1.65985L12.4172 0.406318L11.3021 1.80682L7.1293 3.44938L6.77453 5.61929L8.81027 6.28495L9.96751 5.29942L11.7245 5.61929L8.38791 13.2788L6.54646 12.8552L3.2859 13.9877L0.641973 18.12L1.90903 20.5234L3.05783 20.1084L2.37362 17.7224L3.8434 16.3651L4.49383 20.0133L6.60559 21.5435L6.78298 20.3505L5.94672 16.6677L12.2736 18.9586L18.4399 21.993L20.1462 27.327L19.3353 29.3845L16.5478 28.7448H4.51072L5.17804 32.8166L7.95712 35.6608V37.485L0 38.4446C0 38.4446 0 51.6023 0 52L39 51.8703L38.2989 44.2195ZM21.0331 30.128L21.54 27.5777L21.2866 25.2781L23.3899 29.056L23.525 30.9147L21.0331 30.128ZM25.3749 31.468L25.2651 29.3067L22.6719 22.5722L26.8447 27.2838L29.0409 32.9809L25.3749 31.468Z"
                              fill="#C8B197"></path>
                    </svg>
                    <div class="popup-header-saint-petersburg">Санкт-Петербург</div>
                </div>
            </div>
            <!--     Modal window       -->
            <div class="header-nav-text">Проектирование</div>
            <div class="header-nav-text">Строительство</div>
            <div class="header-nav-text">Интерьер</div>
            <div class="header-nav-text">Лаунж</div>
            <div class="header-nav-text">Ландшафт</div>
            <div class="down-number-phone">+7 921 570 31 57</div>
        </div>
        <div class="container-header-hamburger">
            <svg class="hamburger-menu" width="56" height="25" viewBox="0 0 56 25" fill="none" cursor="pointer"
                 xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="23.25" x2="55.5" y2="23.25" stroke="white" stroke-width="3"></line>
                <line x1="0.5" y1="1.75" x2="55.5" y2="1.75" stroke="white" stroke-width="3"></line>
            </svg>
        </div>
    </div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
    background-image: url('/images/picture-backgrounds.jpg');
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-attachment: fixed;*/
}


/* main container */
.container-header {
    display: flex;
    justify-content: space-between;
    height: 152px;
    padding-left: 142px;
    background-color: rgb(0,0,0, 0.66);
}

/* logo */
.container-header-logo {
    height: 100%;
    width: 408px;
    margin-right: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-right: 1px gray solid;
    border-left: 1px gray solid;

    cursor: pointer;
}

/* upper header navigation */
.container-header-right {
    display: flex;
}

.container-header-navigation {
    padding-top: 18px;
}

.container-header-upper {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;

    margin-bottom: 18px;
}

.header-mark-city {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 5px;
    cursor: pointer;
}

.header-city {
    margin-right: 45px;

    align-self: center;
    color: #c8b17a;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;

    border-bottom: 1px #c8b17a solid;
    padding-bottom: 3px;

    cursor: pointer;
}

.header-upper-number-phone {
    margin-right: 40px;

    color: white;
    font-family: sans-serif;
    font-size: 19px;

    transition: 0.3s ease;

    cursor: pointer;
}

.header-upper-number-phone:hover {
    transition: 0.3s ease;
    color: #c8b17a;
}

/* modal window */
.container-header-popup-change-city {
    display: grid;
    position: absolute;
    right: 325px;
    top: 50px;

    width: 240px;
    height: 0;
    overflow: hidden;
    background-color: white;

    transition: height 300ms ease;
}

.active {
    height: 180px;
    transition: height 300ms ease;
}

.popup-header-city {
    padding-top: 25px;
    padding-left: 20px;

    color: black;
    font-weight: bolder;
    font-size: 20px;
    font-family: sans-serif;
}

/* moscow */
.container-header-popup-svg-icon-moscow {
    display: flex;
    align-items: center;
    height: fit-content;
    padding-left: 20px;
}

.popup-icon-moscow {
    margin-right: 10px;
}

.popup-header-moscow {
    border-bottom: 1px solid black;

    font-family: sans-serif;
    font-size: 16px;
}

/* saint-petersburg */
.container-header-popup-svg-icon-saint-petersburg {
    display: flex;
    align-items: center;
    height: fit-content;
    padding-left: 20px;
    margin-bottom: 20px;
}

.popup-icon-saint-petersburg {
    margin-right: 10px;
}

.popup-header-saint-petersburg {
    border-bottom: 1px solid black;

    font-family: sans-serif;
    font-size: 16px;
}

/* down header navigation */
.header-nav-text {
    display: inline-block;
    margin-right: 40px;

    color: white;
    font-size: 18px;
    font-family: sans-serif;

    transition: 0.3s ease;

    cursor: pointer;
}

.header-nav-text:hover {
    color: #c8b17a;
    transition: 0.3s ease;
}

.down-number-phone {
    display: inline-block;
    margin-right: 40px;

    color: white;
    font-size: 28px;
    font-family: sans-serif;

    transition: 0.3s ease;

    cursor: pointer;
}

.down-number-phone:hover {
    transition: 0.3s ease;
    color: #c8b17a;
}

.hover-phone {
    transition: 0.3s ease;
    color: #c8b17a;
}

/* hamburger menu */
.container-header-hamburger {
    display: flex;
    justify-content: center;
    align-items: center;

    border-left: 1px gray solid;
    height: 152px;
    width: 160px;
}

JS：

const containerHeaderUpperEl = document.querySelector('.container-header-upper');
const headerCityEl = document.querySelector('.header-city');
const containerHeaderPopupChangeCityEl = document.querySelector('.container-header-popup-change-city');

const expandWindow = () => {
    containerHeaderPopupChangeCityEl.classList.add('active');
}
if (containerHeaderUpperEl.addEventListener('click', expandWindow) || headerCityEl.addEventListener('click', expandWindow));

const collapseWindow = () => {
    containerHeaderPopupChangeCityEl.classList.remove('active');
}
document.addEventListener('click', (event) => {
    const click = event.composedPath().includes(containerHeaderPopupChangeCityEl);
    console.log(click);
    if (!click) {
        collapseWindow();
    }
});
javascript
Martin Hope
TopTTeDHbIu-DeJLbFuH4uk
Asked: 2023-09-04 18:32:55 +0000 UTC
  • 6

如何向模态窗口添加滚动条，使其仅在文本高度超过窗口高度时出现并仍保留所有效果？在此输入图像描述 在此输入图像描述

UPD：不应该有底部滚动

HTML：

    <div class="container-modal-window-easy-difficult">
    <div class="modal-window-easy-difficult">
        <div class="header-easy-difficult">EASY</div>
        <div class="content-wrapper">
            <div class="text-modal-window-easy-difficult">
                The Easy difficulty level on our website is the perfect starting point for those who are just beginning
                their journey into the world of tasks and challenges. Here, you will find puzzles and tasks that provide an
                inspiring challenge but won't be overly difficult. With this level of difficulty, you can familiarize
                yourself with basic concepts and patterns, which will gradually help you develop your skills and move on to
                more serious challenges. Raise the bar of your knowledge with ease and confidence as you prepare for more
                complex trials ahead.
            </div>
        </div>
        <div class="container-btn">
            <button class="close-btn">CLOSE</button>
            <button class="next-btn">NEXT</button>
        </div>
    </div>
</div>

CSS：

body {
    background-color: #16171b;
    margin: 0;
    padding: 0;
}

.container-modal-window-easy-difficult {
    position: absolute;
    top: 190px;
    left: 600px;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

:root {
    --clr-1: #052b2f;
    --clr-2: #073438;
    --clr-3: #0e4b50;
    --clr-4: #2d578f;
    --clr-5: #0038ad;
}

.modal-window-easy-difficult{
    height: 500px;
    width: 700px;
    background: var(--clr-1);
    border-radius: 0.5rem;

    position: relative;
    /*overflow-y: scroll;*/
}

.modal-window-easy-difficult::before,
.modal-window-easy-difficult::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    z-index: -1;
    background: conic-gradient(
            from var(--gradient-angle),
            var(--clr-3),
            var(--clr-4),
            var(--clr-5),
            var(--clr-4),
            var(--clr-3)
    );
    border-radius: inherit;
    animation: rotation 5s linear infinite;
}

.modal-window-easy-difficult::after {
    filter: blur(3.5rem);
}

@keyframes rotation {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
}

/* SCROLLBAR */
::-webkit-scrollbar {
    background-color: #0e4b50;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background-color: #0038ad;
}

/* CONTENT */
.header-easy-difficult {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 10px;
    width: 100%;
    height: 40px;

    font-size: 30px;
    color: #0038ad;
    font-weight: bold;
    font-family: 'Kanit', sans-serif;
    letter-spacing: .1em;
    filter: brightness(300%);

    user-select: none;
}


.text-modal-window-easy-difficult {
    padding: 10px 15px 15px;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #c1c1c1;;
    font-weight: bold;
    text-align: justify;
}

/* BUTTON CLOSE */
.container-btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-height: 100px;
    padding-top: 20px;
    font-family: 'Raleway', sans-serif;
}

.close-btn{
    height: 50px;
    width: 100px;
    background-color: #050801;
    color: #03e9f4;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    cursor: pointer;
}

.close-btn:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px red,
    0 0 25px darkred;
    /*0 0 25px #03e9f4;*/
    /*0 0 50px #03e9f4,*/
    /*0 0 200px #03e9f4;*/
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

/* BUTTON NEXT */
.next-btn{
    height: 50px;
    width: 100px;
    background-color: #050801;
    color: #03e9f4;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    letter-spacing: 4px;
    overflow: hidden;
    transition: 0.5s;
    cursor: pointer;
}

.next-btn:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 25px #03e9f4;
    /*0 0 50px #03e9f4,*/
    /*0 0 200px #03e9f4;*/
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
html
Martin Hope
TopTTeDHbIu-DeJLbFuH4uk
Asked: 2023-09-01 20:20:22 +0000 UTC
  • 5

各位，如何将悬停应用到滑动导航菜单？我有一个图标，在屏幕后面，使用变换，隐藏了带有文本的菜单的一部分，当您将鼠标悬停在该区域上时，我需要显示就像下图一样背景颜色（参见屏幕截图）：#2a2a2e；但是，由于带有图标的容器和文本在html结构中是分开的，我只能将效果应用到带有图标的容器，带有文本的区域不会被捕获，我尝试添加一个带有给它设置固定的宽度和高度，通过为容器分配事件处理程序来使用 JS 设置样式等，但这一切都不成功。总的来说，hover效果应该和codeWars网站上的一样，非常感谢！！！

HTML：

<div class="main-container">
    <div class="icon-logo-unrated">
        <img src="test/Unrated.svg" alt="img-icon-logo">
    </div>
    <div class="drop-right-menu">
        <div class="home-page-label">Home
            <div class="home-page-text">Go home to choose a different difficulty</div>
        </div>
    </div>
</div>

CSS：

/* main container */
.main-container {
    position: absolute;

    background-color: #121216;
    width: 50px;
    height: 100vh;
    /*border-right: 1px solid #2a2a2e;*/
}

.icon-logo-unrated {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 60px;
}

.drop-right-menu {
    position: relative;

    width: 320px;
    height: 100vh;
    background-color: #121216;
    border-right: 1px solid #2a2a2e;

    z-index: -1;

    transition: transform 0.3s ease;
    transform: translateX(-320px);
}

.main-container:hover .drop-right-menu {
    transition: transform 0.3s ease;
    transform: translateX(0);
}

/* TEXT */
.home-page-label {
    font-size: 20px;
    line-height: 1.5rem;
    font-weight: 700;
    color: #c1c1c1;

    padding-left: 55px;
    padding-top: 8px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.home-page-text {
    padding-bottom: 0.25rem;
    font-size: 15px;
    line-height: 1rem;
    white-space: nowrap;
    color: #c1c1c1;

    padding-top: 3px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.icon-logo-unrated:hover {
    background-color: #2a2a2e;
}
javascript