我想保留列表-组-项-操作悬停效果，它改变了背景，但我想删除点击效果，使其活动。我该怎么做？
我从"如果我删除列表-组-项-操作“中删除了href="#”，悬停效果将被删除
我并不想在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.log(selected_item);
            console.log(`previous image: ${previous_image.id}`);
            console.log(`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/bootstrap@5.3.0-alpha1/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/bootstrap-icons@1.10.3/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/bootstrap@5.3.0-alpha1/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>