问题

以下是你要翻译的内容：

"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

Facing an issue with in the frontend, data retrieved from AWS DynamoDB using AWS Lambda though Function URL is not displayed

如何在使用Tailwind CSS时为组群悬停添加过渡效果？

无法在安卓上运行JavaScript。

为什么这个程序没有打印任何内容？

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

发表评论