2023年2月10日 14:53:23go评论77阅读模式

英文:

Remove list-group-item-action click

问题

我想保留列表项的悬停效果，即更改背景颜色，但我想删除使其变为活动状态的单击效果。我该如何做？

我从<a>标签中删除了href="#"。
如果我删除list-group-item-action，悬停效果也会被移除。

我不想在CSS中指定悬停颜色，因为Bootstrap列表组会自动在浅色/深色模式下更改悬停颜色。另外，我不知道确切的浅色/深色模式悬停颜色是什么。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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.classList.remove('d-md-block');
            current_image.classList.add('d-md-block');
        }
    });
});

<!-- language: lang-css -->

.test_image .d-md-block {
    transition-timing-function: opacity 3s ease-in;
}

<!-- language: lang-html -->

<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
                        </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
                        </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
                        </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>

<!-- end snippet -->

英文:

I want to keep the list-group-item-action hover effect where it changes the background but I want to remove the click effect that makes it active. How would I do this?

I removed the href="#" from the <a>
If I remove list-group-item-action, the hover effect is removed

I don't really want to specify a hover color in css because the bootstrap list groups automatically change the hover colors in light/dark mode. Also idk what the exact light/dark mode hover colors are lol

const test_list_items = document.querySelectorAll(&#39;.test_list_item&#39;);
test_list_items.forEach(element =&gt; {
element.addEventListener(&#39;mouseover&#39;, () =&gt; {
let previous_item = document.querySelector(&#39;.test_list_item.selected&#39;);
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 &amp;&amp; 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(&#39;selected&#39;);
current_item.classList.add(&#39;selected&#39;);
// previous_image.style.opacity = 0;
previous_image.classList.remove(&#39;d-md-block&#39;);
// current_image.style.opacity = 1;
current_image.classList.add(&#39;d-md-block&#39;);
}
});
});

.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}

        &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;css/index.css&#39;) }}&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css&quot;&gt;
&lt;section class=&quot;p-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h2 class=&quot;text-center display-5 fw-bold&quot;&gt;test&lt;/h2&gt;
&lt;p class=&quot;lead text-center mb-5&quot;&gt;
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
&lt;/p&gt;
&lt;div class=&quot;row g-4 justify-content-between&quot;&gt;
&lt;div class=&quot;col-md&quot;&gt;
&lt;div class=&quot;list-group list-group-flush&quot;&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected&quot; id=&quot;test_list_item_1&quot;&gt;
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg&quot; style=&quot;height: 50px; width: 50px;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;1&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item&quot; id=&quot;test_list_item_2&quot;&gt; 
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://www.jbcandcompany.com/images/S%20Orange.png&quot; style=&quot;height: 50px; width: 50px;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;2&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item&quot; id=&quot;test_list_item_3&quot;&gt;
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg&quot; class=&quot;rounded-0&quot; style=&quot;height: 75px; width: 75px; background-color: yellow;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;3&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md&quot;&gt;
&lt;div class=&quot;image_container&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg&quot; class=&quot;test_image d-none d-md-block active&quot; id=&quot;test_image_1&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;img src=&quot;https://www.jbcandcompany.com/images/S%20Orange.png&quot; class=&quot;test_image d-none&quot; id=&quot;test_image_2&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg&quot; class=&quot;test_image d-none&quot; id=&quot;test_image_3&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;{{ url_for(&#39;static&#39;, filename=&#39;script/index.js&#39;) }}&quot;&gt;&lt;/script&gt;

答案1

得分: 1

以下是您要翻译的内容：

I want to keep the list-group-item-action hover effect where it
changes the background but I want to remove the click effect that
makes it active.

If you want :

keep the hover effect

make the click effect same as hover effect

Just add following CSS :
.list-group-item:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
I don't really want to specify a hover color in css because the
bootstrap list groups automatically change the hover colors in
light/dark mode.

If you want :

remove hover and click effect completely

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

请注意，代码部分不会被翻译。如果您有其他问题或需要进一步的帮助，请随时告诉我。

英文:

> I want to keep the list-group-item-action hover effect where it
> changes the background but I want to remove the click effect that
> makes it active.

If you want :

keep the hover effect
make the click effect same as hover effect

Just add following CSS :

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

> I don't really want to specify a hover color in css because the
> bootstrap list groups automatically change the hover colors in
> light/dark mode.

If you want :

remove hover and click effect completely

Just add following CSS :

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

For how to find out the CSS specified in those :active, :focus, :hover selectors, by taking Chrome as example, open the browser debugger, select the element that you would like to dig out the CSS, from screenshot below, you can see I highlighted two red boxes.

Click on the :hov option and the available selectors will listed out, just tick/untick them to see the effect.

Hope it helps !

const test_list_items = document.querySelectorAll(&#39;.test_list_item&#39;);
test_list_items.forEach(element =&gt; {
element.addEventListener(&#39;mouseover&#39;, () =&gt; {
let previous_item = document.querySelector(&#39;.test_list_item.selected&#39;);
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 &amp;&amp; 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(&#39;selected&#39;);
current_item.classList.add(&#39;selected&#39;);
// previous_image.style.opacity = 0;
previous_image.classList.remove(&#39;d-md-block&#39;);
// current_image.style.opacity = 1;
current_image.classList.add(&#39;d-md-block&#39;);
}
});
});

.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 &amp; 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;
}
*/

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;css/index.css&#39;) }}&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css&quot;&gt;
&lt;section class=&quot;p-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h2 class=&quot;text-center display-5 fw-bold&quot;&gt;test&lt;/h2&gt;
&lt;p class=&quot;lead text-center mb-5&quot;&gt;
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
&lt;/p&gt;
&lt;div class=&quot;row g-4 justify-content-between&quot;&gt;
&lt;div class=&quot;col-md&quot;&gt;
&lt;div class=&quot;list-group list-group-flush&quot;&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected&quot; id=&quot;test_list_item_1&quot;&gt;
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg&quot; style=&quot;height: 50px; width: 50px;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;1&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item&quot; id=&quot;test_list_item_2&quot;&gt; 
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://www.jbcandcompany.com/images/S%20Orange.png&quot; style=&quot;height: 50px; width: 50px;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;2&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item&quot; id=&quot;test_list_item_3&quot;&gt;
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg&quot; class=&quot;rounded-0&quot; style=&quot;height: 75px; width: 75px; background-color: yellow;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;3&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md&quot;&gt;
&lt;div class=&quot;image_container&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg&quot; class=&quot;test_image d-none d-md-block active&quot; id=&quot;test_image_1&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;img src=&quot;https://www.jbcandcompany.com/images/S%20Orange.png&quot; class=&quot;test_image d-none&quot; id=&quot;test_image_2&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg&quot; class=&quot;test_image d-none&quot; id=&quot;test_image_3&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;{{ url_for(&#39;static&#39;, filename=&#39;script/index.js&#39;) }}&quot;&gt;&lt;/script&gt;

答案2

得分: 0

以下是你要翻译的内容：

/* CSS代码开始 */
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
/* CSS代码结束 */

/* JavaScript代码开始 */
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');
        }
    });
});
/* JavaScript代码结束 */

/* CSS代码开始 */
.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}
/* CSS代码结束 */

<!-- HTML代码开始 -->
<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>
<!-- HTML代码结束 -->

英文:

Simple override the :focus and :active css--

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

const test_list_items = document.querySelectorAll(&#39;.test_list_item&#39;);
test_list_items.forEach(element =&gt; {
element.addEventListener(&#39;mouseover&#39;, () =&gt; {
let previous_item = document.querySelector(&#39;.test_list_item.selected&#39;);
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 &amp;&amp; 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(&#39;selected&#39;);
current_item.classList.add(&#39;selected&#39;);
// previous_image.style.opacity = 0;
previous_image.classList.remove(&#39;d-md-block&#39;);
// current_image.style.opacity = 1;
current_image.classList.add(&#39;d-md-block&#39;);
}
});
});

.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}

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;css/index.css&#39;) }}&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css&quot;&gt;
&lt;section class=&quot;p-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h2 class=&quot;text-center display-5 fw-bold&quot;&gt;test&lt;/h2&gt;
&lt;p class=&quot;lead text-center mb-5&quot;&gt;
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
&lt;/p&gt;
&lt;div class=&quot;row g-4 justify-content-between&quot;&gt;
&lt;div class=&quot;col-md&quot;&gt;
&lt;div class=&quot;list-group list-group-flush&quot;&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected&quot; id=&quot;test_list_item_1&quot;&gt;
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg&quot; style=&quot;height: 50px; width: 50px;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;1&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item&quot; id=&quot;test_list_item_2&quot;&gt; 
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://www.jbcandcompany.com/images/S%20Orange.png&quot; style=&quot;height: 50px; width: 50px;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;2&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item&quot; id=&quot;test_list_item_3&quot;&gt;
&lt;span class=&quot;badge&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg&quot; class=&quot;rounded-0&quot; style=&quot;height: 75px; width: 75px; background-color: yellow;&quot;&gt;
&lt;/span&gt;
&lt;div class=&quot;ms-2 me-auto&quot;&gt;
&lt;div class=&quot;d-flex w-100&quot;&gt;
&lt;h5 class=&quot;mb-1&quot;&gt;3&lt;/h5&gt;
&lt;/div&gt;
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
&lt;!-- &lt;p class=&quot;mb-1 text-muted&quot;&gt;Some placeholder content in a paragraph.&lt;/p&gt; --&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md&quot;&gt;
&lt;div class=&quot;image_container&quot;&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg&quot; class=&quot;test_image d-none d-md-block active&quot; id=&quot;test_image_1&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;img src=&quot;https://www.jbcandcompany.com/images/S%20Orange.png&quot; class=&quot;test_image d-none&quot; id=&quot;test_image_2&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;img src=&quot;https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg&quot; class=&quot;test_image d-none&quot; id=&quot;test_image_3&quot; style=&quot;height: 500px; width: 700px;&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;{{ url_for(&#39;static&#39;, filename=&#39;script/index.js&#39;) }}&quot;&gt;&lt;/script&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

删除列表项的点击操作。

问题

答案1

答案2

Python – 仅在 p 标签之间替换 HTML 中的一些文本

使用Bing API绘制圆形不起作用。

Smart Contract交互 – 如何修复无效的BigNumber值

如何使用HTML和CSS创建卡片的背景框架。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论