Задать вопрос

TtT RrR

Начинающий псевдопрогер

4

вклад
15

вопросов
9

ответов
56%

решений

Комментарии

Как лучше оформить фильтр?

TtT RrR @UNN4MED Автор вопроса

Здравствуйте, уже третий день не могу разобраться с проблемой, ползунок не встаёт под кнопку

брал код из предложенной ссылки

const padding = 13;
const hover = document.querySelector(".cakes-nav__line");
const activeMenuItemClass = "cakes-nav__button_selected";
let defaultElement = document.querySelector("." + activeMenuItemClass);
document.querySelectorAll(".cakes-nav__button").forEach((el) => {
    el.addEventListener("mouseover", (ev) => onHoverMenuItem(ev.target));
    el.addEventListener("mouseout", (ev) => onOutMenuItem(ev.target));
    el.addEventListener("click", (ev) => onClickMenuItem(ev.target));
});

function onClickMenuItem(element) {
    document.querySelector("." + activeMenuItemClass).classList.remove(activeMenuItemClass);
    element.classList.add(activeMenuItemClass);
    defaultElement = element;
    onHoverMenuItem(element);
} // выделяем элемент по умолчанию

onHoverMenuItem(defaultElement);

function onOutMenuItem(element) {
    onHoverMenuItem(defaultElement);
}

function onHoverMenuItem(element) {
    const itemRect = element.getBoundingClientRect();
    hover.style.left = itemRect.left - padding + "px";
    hover.style.width = itemRect.width - padding + "px";
}

Написано 10 авг. 2022

Почему не правильно работает слайдер?
TtT RrR @UNN4MED Автор вопроса
Сергей Сергей, при поиске точек не указал в скобках перед классом точку, теперь класс active убирается, но повторно на других точках не появляется, картинки и текст не меняются, всплывает ошибка:

const sliderControls = document.querySelector('.slider__controls'); const dots = sliderControls.querySelectorAll('.slider__dots');

Написано 01 июн. 2022
Почему не правильно работает слайдер?

TtT RrR @UNN4MED Автор вопроса

Сергей Сергей, dots пуст имеете ввиду переменная k=0 не указано? а я вообще правильно обращаюсь к точкам в html?

Написано 01 июн. 2022
Почему не правильно работает слайдер?

TtT RrR @UNN4MED Автор вопроса

WapSter, Daniil, отредактировал

Написано 01 июн. 2022
Не появляется значок при наведении, проблема в пути к файлу. Что не так?

TtT RrR @UNN4MED Автор вопроса

Николай Угольников, да, я пишу, как вы посоветовали, но тоже самое. Может дело в политике CORS или это не действует на локальный просмотр сайта?

Написано 14 мая 2022
Не появляется значок при наведении, проблема в пути к файлу. Что не так?

TtT RrR @UNN4MED Автор вопроса

Николай Угольников, когда работаю с плагином Live Server, значок есть

Написано 14 мая 2022
Не появляется значок при наведении, проблема в пути к файлу. Что не так?

TtT RrR @UNN4MED Автор вопроса

Николай Угольников, не помогло, консоль показывает тоже самое

Написано 14 мая 2022
Не появляется значок при наведении, проблема в пути к файлу. Что не так?

TtT RrR @UNN4MED Автор вопроса

Поставить / перед img не подойдёт, типа выйти в корень?

Написано 13 мая 2022
Почему нельзя писать transition в hover?

TtT RrR @UNN4MED Автор вопроса

Алексей Уколов, https://otvet.mail.ru/question/218953686

Написано 10 апр. 2022

Как при наведении на ссылку изменить цвет ссылки/текста и svg одновременно?

TtT RrR @UNN4MED Автор вопроса

Ankhena, что ж, сработало. Спасибо!

<style>
a{
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    color: gray;
    text-align: center;
}
a.icon:before{
    content: "";
    background-color: gray;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.icon-1:before {
    -webkit-mask-image: url(images/plane-solid.svg);
    mask-image: url(images/plane-solid.svg);
}
.icon-2:before {
    -webkit-mask-image: url(images/plane-departure-solid.svg);
    mask-image: url(images/plane-departure-solid.svg);
}
.icon-3:before {
    -webkit-mask-image: url(images/train-solid.svg);
    mask-image: url(images/train-solid.svg);
}
.icon-4:before {
    -webkit-mask-image: url(images/hotel-solid.svg);
    mask-image: url(images/hotel-solid.svg);
}
.icon-5:before {
    -webkit-mask-image: url(images/thumbs-up-solid.svg);
    mask-image: url(images/thumbs-up-solid.svg);
}
a:hover{
    color: rgb(17, 97, 218);
}
.icon:hover::before{
    background-color: rgb(17, 97, 218);
}
</style>
<body>
<section>
        <ul>
            <li>
                <a class="icon icon-1" href="#">авиабилеты</a>
            </li>
            <li>
                <a class="icon icon-2" href="#">чартеры</a>
            </li>
            <li>
                <a class="icon icon-3" href="#">ж/д билеты</a>
            </li>
            <li>
                <a class="icon icon-4" href="#">гостиницы</a>
            </li>
            <li>
                <a class="icon icon-5" href="#">туризм</a>
            </li>
        </ul>
    </section>
</body>

Написано 03 апр. 2022

Как изменять название вкладки при выходе из сайта?

TtT RrR @UNN4MED

ты сам себе ответил?

Написано 02 апр. 2022

Как при наведении на ссылку изменить цвет ссылки/текста и svg одновременно?

TtT RrR @UNN4MED Автор вопроса

Как бы интересное свойство mask, но результата, которого я хотел, это не принесло. Текст и svg в ссылке по-прежнему выделяются отдельно

<style>
ul{
    display: flex;
    list-style: none;
    justify-content: center;
    min-height: 40px;
    align-items: center;
}
a{
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    color: gray;
    text-align: center;
}
.icon{
    background-color: gray;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.icon-1 {
    mask: url(images/plane-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/plane-solid.svg) no-repeat 50% 50%;
}
.icon-2 {
    mask: url(images/plane-departure-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/plane-departure-solid.svg) no-repeat 50% 50%;
}
.icon-3 {
    mask: url(images/train-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/train-solid.svg) no-repeat 50% 50%;
}
.icon-4 {
    mask: url(images/hotel-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/hotel-solid.svg) no-repeat 50% 50%;
}
.icon-5 {
    mask: url(images/thumbs-up-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/thumbs-up-solid.svg) no-repeat 50% 50%;
}
a:hover{
    color: rgb(17, 97, 218);
}
.icon:hover{
    background-color: rgb(17, 97, 218);
}
</style>
<body>
<section>
        <ul>
            <li><a href="#">
                <span class="icon icon-1"></span>
                    авиабилеты
                </a></li>
            <li><a href="#">
                <span class="icon icon-2"></span>
                    чартеры
                </a></li>
            <li><a href="#">
                <span class="icon icon-3"></span>
                    ж/д билеты
                </a></li>
            <li><a href="#">
                <span class="icon icon-4"></span>
                    гостиницы
                </a></li>
            <li><a href="#">
                <span class="icon icon-5"></span>
                    туризм
                </a></li>
        </ul>
    </section>
</body>

Написано 02 апр. 2022

Почему неправильно подсчитывается ширина врапящегося флекса?

TtT RrR @UNN4MED

Но тут указана высота, а не ширина

.grid {
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

Написано 02 апр. 2022
Изображение и шрифты отображаются только при использовании плагина live server в VSCode. Почему?

TtT RrR @UNN4MED Автор вопроса

Нашёл кучу ошибок, благодаря Rsa97:

Написано более года назад
Изображение и шрифты отображаются только при использовании плагина live server в VSCode. Почему?

TtT RrR @UNN4MED Автор вопроса

Нашёл, здесь много ошибок, что мне делать?

Написано более года назад

Самые активные сегодня

Taulan Khatuaev
- 7 ответов
- 0 вопросов
Stalker_RED
- 7 ответов
- 0 вопросов
Василий Банников
- 5 ответов
- 0 вопросов
aryzhanki
- 4 ответа
- 1 вопрос
Drno
- 5 ответов
- 0 вопросов
CityCat4
- 5 ответов
- 0 вопросов

Войдите на сайт