Удалить элемент списка-группы-элемент-действие

Я хочу сохранить эффект наведения списка-группы-элемента-действия, когда он меняет фон, но я хочу удалить эффект щелчка, который делает его активным. Как бы я это сделал?

Я удалил href="#" из Если я удалю list-group-item-action, эффект наведения будет удален

Я действительно не хочу указывать цвет при наведении в css, потому что группы списка начальной загрузки автоматически меняют цвета при наведении в светлом/темном режиме. Также не знаю, какие точные цвета при наведении на светлый / темный режим, лол 

const test_list_items = document.querySelectorAll('.test_list_item');

test_list_items.forEach(element => {
    element.addEventListener('mouseover', () => {
        let previous_item = document.querySelector('.test_list_item.selected');
        let current_item = element;

        let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
        let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

        if (previous_item && previous_item.id !== current_item.id) {
            let selected_item = current_item.id;
            console.info(selected_item);
            console.info(`previous image: ${previous_image.id}`);
            console.info(`previous image: ${current_image.id}`);

            previous_item.classList.remove('selected');
            current_item.classList.add('selected');

            // previous_image.style.opacity = 0;
            previous_image.classList.remove('d-md-block');
            // current_image.style.opacity = 1;
            current_image.classList.add('d-md-block');
        }
    });
});
.test_image .d-md-block {
    /* position:absolute; */
    /* opacity:1; */
    /* transition: opacity 0.5s linear; */
    transition-timing-function: opacity 3s ease-in;
}
        <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
        <link rel = "stylesheet" href = "{{ url_for('static', filename='css/index.css') }}" />
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<section class = "p-5">
    <div class = "container">
        <h2 class = "text-center display-5 fw-bold">test</h2>
        <p class = "lead text-center mb-5">
          esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
        </p>

        <div class = "row g-4 justify-content-between">
            <div class = "col-md">
                <div class = "list-group list-group-flush">
                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id = "test_list_item_1">
                        <span class = "badge">
                            <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style = "height: 50px; width: 50px;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">1</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>

                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_2"> 
                        <span class = "badge">
                            <img src = "https://www.jbcandcompany.com/images/S%20Orange.png" style = "height: 50px; width: 50px;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">2</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>

                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_3">
                        <span class = "badge">
                            <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "rounded-0" style = "height: 75px; width: 75px; background-color: yellow;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">3</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>
                </div>
            </div>

            <div class = "col-md">
                <div class = "image_container">
                    <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class = "test_image d-none d-md-block active" id = "test_image_1" style = "height: 500px; width: 700px;" />
                    <img src = "https://www.jbcandcompany.com/images/S%20Orange.png" class = "test_image d-none" id = "test_image_2" style = "height: 500px; width: 700px;" />
                    <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "test_image d-none" id = "test_image_3" style = "height: 500px; width: 700px;" />
                </div>
            </div>
        </div>
    </div>
</section>

        <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
        <script type = "text/javascript" src = "{{ url_for('static', filename='script/index.js') }}"></script>
javascript html css twitter-bootstrap bootstrap-5
10.02.2023 07:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
61
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Простое переопределение :focus и :active css--

.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}


const test_list_items = document.querySelectorAll('.test_list_item');

test_list_items.forEach(element => {
    element.addEventListener('mouseover', () => {
        let previous_item = document.querySelector('.test_list_item.selected');
        let current_item = element;

        let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
        let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

        if (previous_item && previous_item.id !== current_item.id) {
            let selected_item = current_item.id;
            console.info(selected_item);
            console.info(`previous image: ${previous_image.id}`);
            console.info(`previous image: ${current_image.id}`);

            previous_item.classList.remove('selected');
            current_item.classList.add('selected');

            // previous_image.style.opacity = 0;
            previous_image.classList.remove('d-md-block');
            // current_image.style.opacity = 1;
            current_image.classList.add('d-md-block');
        }
    });
});
.test_image .d-md-block {
    /* position:absolute; */
    /* opacity:1; */
    /* transition: opacity 0.5s linear; */
    transition-timing-function: opacity 3s ease-in;
}
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
        <link rel = "stylesheet" href = "{{ url_for('static', filename='css/index.css') }}" />
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<section class = "p-5">
    <div class = "container">
        <h2 class = "text-center display-5 fw-bold">test</h2>
        <p class = "lead text-center mb-5">
          esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
        </p>

        <div class = "row g-4 justify-content-between">
            <div class = "col-md">
                <div class = "list-group list-group-flush">
                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id = "test_list_item_1">
                        <span class = "badge">
                            <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style = "height: 50px; width: 50px;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">1</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>

                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_2"> 
                        <span class = "badge">
                            <img src = "https://www.jbcandcompany.com/images/S%20Orange.png" style = "height: 50px; width: 50px;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">2</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>

                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_3">
                        <span class = "badge">
                            <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "rounded-0" style = "height: 75px; width: 75px; background-color: yellow;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">3</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>
                </div>
            </div>

            <div class = "col-md">
                <div class = "image_container">
                    <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class = "test_image d-none d-md-block active" id = "test_image_1" style = "height: 500px; width: 700px;" />
                    <img src = "https://www.jbcandcompany.com/images/S%20Orange.png" class = "test_image d-none" id = "test_image_2" style = "height: 500px; width: 700px;" />
                    <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "test_image d-none" id = "test_image_3" style = "height: 500px; width: 700px;" />
                </div>
            </div>
        </div>
    </div>
</section>

        <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
        <script type = "text/javascript" src = "{{ url_for('static', filename='script/index.js') }}"></script>
10.02.2023 08:07
Ответ принят как подходящий

Я хочу сохранить эффект наведения списка-группы-элементов там, где он меняет фон, но я хочу удалить эффект щелчка, который делает его активным.

Если ты хочешь :

  • сохранить эффект наведения
  • сделать эффект щелчка таким же, как эффект наведения

Просто добавьте следующий CSS:

.list-group-item:active {
  color: var(--bs-list-group-action-hover-color) !important;
  background-color: var(--bs-list-group-action-hover-bg) !important;
}

Я действительно не хочу указывать цвет при наведении в css, потому что группы списка начальной загрузки автоматически меняют цвета при наведении светлый/темный режим.

Если ты хочешь :

  • полностью удалить эффект наведения и клика

Просто добавьте следующий CSS:

.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
  color: unset !important;
  background-color: unset !important;
}

Чтобы узнать, как узнать CSS, указанный в этих селекторах :active, :focus, :hover, взяв в качестве примера Chrome, откройте отладчик браузера, выберите элемент, который вы хотите извлечь из CSS, на снимке экрана ниже вы можете см. Я выделил два красных прямоугольника.

Нажмите на опцию :hov, и доступные селекторы будут перечислены, просто отметьте или снимите их, чтобы увидеть эффект.

Надеюсь, поможет !

const test_list_items = document.querySelectorAll('.test_list_item');

test_list_items.forEach(element => {
    element.addEventListener('mouseover', () => {
        let previous_item = document.querySelector('.test_list_item.selected');
        let current_item = element;

        let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
        let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

        if (previous_item && previous_item.id !== current_item.id) {
            let selected_item = current_item.id;
            console.info(selected_item);
            console.info(`previous image: ${previous_image.id}`);
            console.info(`previous image: ${current_image.id}`);

            previous_item.classList.remove('selected');
            current_item.classList.add('selected');

            // previous_image.style.opacity = 0;
            previous_image.classList.remove('d-md-block');
            // current_image.style.opacity = 1;
            current_image.classList.add('d-md-block');
        }
    });
});
.test_image .d-md-block {
    /* position:absolute; */
    /* opacity:1; */
    /* transition: opacity 0.5s linear; */
    transition-timing-function: opacity 3s ease-in;
}

.list-group-item-action:active {
  color: var(--bs-list-group-action-hover-color) !important;
  background-color: var(--bs-list-group-action-hover-bg) !important;
}

/* remove hover & click effect completely */
/*
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
  color: unset !important;
  background-color: unset !important;
}
*/
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
        <link rel = "stylesheet" href = "{{ url_for('static', filename='css/index.css') }}" />
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<section class = "p-5">
    <div class = "container">
        <h2 class = "text-center display-5 fw-bold">test</h2>
        <p class = "lead text-center mb-5">
          esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
        </p>

        <div class = "row g-4 justify-content-between">
            <div class = "col-md">
                <div class = "list-group list-group-flush">
                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id = "test_list_item_1">
                        <span class = "badge">
                            <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style = "height: 50px; width: 50px;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">1</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>

                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_2"> 
                        <span class = "badge">
                            <img src = "https://www.jbcandcompany.com/images/S%20Orange.png" style = "height: 50px; width: 50px;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">2</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>

                    <a class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_3">
                        <span class = "badge">
                            <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "rounded-0" style = "height: 75px; width: 75px; background-color: yellow;">
                        </span>
                        <div class = "ms-2 me-auto">
                            <div class = "d-flex w-100">
                                <h5 class = "mb-1">3</h5>
                            </div>
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            Content for list item
                            <!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
                        </div>
                    </a>
                </div>
            </div>

            <div class = "col-md">
                <div class = "image_container">
                    <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class = "test_image d-none d-md-block active" id = "test_image_1" style = "height: 500px; width: 700px;" />
                    <img src = "https://www.jbcandcompany.com/images/S%20Orange.png" class = "test_image d-none" id = "test_image_2" style = "height: 500px; width: 700px;" />
                    <img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "test_image d-none" id = "test_image_3" style = "height: 500px; width: 700px;" />
                </div>
            </div>
        </div>
    </div>
</section>

        <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
        <script type = "text/javascript" src = "{{ url_for('static', filename='script/index.js') }}"></script>
10.02.2023 08:24

Другие вопросы по теме

Добавить минуты к таймеру обратного отсчета дома
Переход изображения не применяется
JQuery для скрытия и отображения текстового поля
Все сообщения слева в системе Bootstrap Grid
Один клик в навигационном меню Запуск нескольких действий
Почему input.val() нельзя сохранить как глобальную переменную?
Переключить отображение/скрытие функций между несколькими div
Как визуализировать компонент JSX внутри определенного html-div в реакции?
Как изменить одни и те же изображения в нескольких местах с помощью JS?
Отключить удержание, но разрешить щелчок в html (мобильный)

Похожие вопросы

Добавить минуты к таймеру обратного отсчета дома
Передать массив как опору в React Typescript
Как изменить размер уже существующего окна и открыть новое окно Chrome с правой стороны
Как удалить определенные элементы массива в javascript?
Переход изображения не применяется
JQuery для скрытия и отображения текстового поля
React js, хотел показать анимацию только на добавленном элементе «добавить в корзину»
В веб-компоненте Как показать всплывающую подсказку и скрыть всплывающую подсказку при нажатии снаружи или при нажатии другой всплывающей подсказки
Как сохранить значение, сгенерированное циклом for, внутри массива
React Native — попытка изменить 2 высоты просмотра с помощью GestureHandler