Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 11.12.2021, 21:11
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

рони,
<a href="#" class="works__row-image">
        <div class="works__hover">
            <div class="works__hover-text"></div>
            <div class="works__hover-text"></div>
        </div>
        <img src="../src/IMG/worksImages/image_1.jpg" class="works__image">
    </a>


.works__row-image {
display: block;
    transition: 0.3s;
    position: relative;
    margin: 15px;
}
.works__hover {
 transition: 0.3s;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color_8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}


и вот как делал я

const children = document.querySelector(".works__hover")
    children.addEventListener("click", () => {
      children.parentNode.classList.toggle("active")
    });


По картинке видно что класс добовляется works__hover, а мне нужно на works__row-image ,когда я кликаю по элементу works__hover
Изображения:
Тип файла: png ffggf.png (30.8 Кб, 2 просмотров)
Ответить с цитированием
  #12 (permalink)  
Старый 11.12.2021, 21:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Alexander3928,
document.addEventListener("DOMContentLoaded", function() {
            const parent = document.querySelector(".works__row-image")
            parent.addEventListener("click", function(event) {
                event.preventDefault();
                if (event.target.closest(".works__hover")) parent.classList.add("active");
            });
        });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить класс к таблице но не ко всем td Alexprom Элементы интерфейса 12 05.02.2021 15:35
Как добавить условие? LADYX Элементы интерфейса 12 19.03.2020 18:00
Как удалить класс у соседних элементов housewm Events/DOM/Window 4 11.03.2014 13:29
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как при появление класса в блоке1, добавить класс в блок2? raindew jQuery 3 11.10.2013 21:05