问题

以下是你要翻译的内容：

"After hovering over a list item, I'm trying to show that list item's corresponding image. I have this working, but the problem is that the CSS transition is not. Do I need to add a CSS selector? Can I add the transition through JavaScript?

Not sure how to fix this, so any suggestions would be helpful, thanks.

Using bootstrap v5.3.0 alpha-1 as well."

请注意，代码部分不需要翻译。

英文:

After hovering over a list item, I'm trying to show that list items corresponding image. I have this working, but the problem is that the css transition is not.Do I need to add a css selector? Can I add the transition through javascript?

Not sure how to fix this so any suggestions would be helpful, thanks.

Using bootstrap v5.3.0 alpha-1 as well.

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 href=&quot;#&quot; 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 href=&quot;#&quot; 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 href=&quot;#&quot; 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

以下是您要翻译的内容：

Just add and remove fadein animation and you can achieve this:
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');
previous_image.classList.remove('fade-in-image');
current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
current_image.classList.add('fade-in-image');
}
});
});
.fade-in-image {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<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 href="#" 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 href="#" 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 href="#" 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-w76AqPfDk
<details>
<summary>英文:</summary>
Just add and remove fadein animation and you can achieve this:
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
&lt;!-- language: lang-js --&gt;
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;);
previous_image.classList.remove(&#39;fade-in-image&#39;);
// current_image.style.opacity = 1;
current_image.classList.add(&#39;d-md-block&#39;);
current_image.classList.add(&#39;fade-in-image&#39;);
}
});
});
&lt;!-- language: lang-css --&gt;
.fade-in-image {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
&lt;!-- language: lang-html --&gt;
&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 href=&quot;#&quot; 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 href=&quot;#&quot; 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 href=&quot;#&quot; 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;
&lt;!-- end snippet --&gt;
</details>
# 答案2
**得分**: 0
首先将先前的不透明度设置为0，然后当你想要滚动时，将不透明度设置为1；如果不设置先前的不透明度，你的过渡效果将不起作用。
<details>
<summary>英文:</summary>
First add your previous opacity: 0 and then when you want to scroll then set opacity: 1; if you will not set previous opacity. Your transition will not work.
</details>

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

图像转换未应用

问题

答案1

CSS添加额外空格而不是正确换行

Javascript Generator Function Jest Testing Yielding Same Yield

如何禁用Google翻译对HTML类名的翻译

垂直移动容器外的文本

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 在上下文菜单中以大文本形式打开

发表评论