<p>Saya cuba menyelesaikan masalah animasi mudah di mana imej latar belakang memudar masuk dan keluar semasa tuding. Walaupun saya telah menentukan kerangka utama, penyemak imbas web mengatakan ia tidak ditentukan: </p> <pre class="brush:php;toolbar:false;">.elementor-section.elementor-element.core-range > .elementor-container:hover .product-image::before { animasi: coreRangeBackground 0.3s kemudahan-keluar 0.3s; mod-isi-animasi: ke hadapan; } @keyframes coreRangeBackground { 100% { background-image: url("./images/core-range-bg.svg" } } .bahagian-elemen.elemen-elemen.fasa-bulan > .elementor-container:hover .product-image::before { animasi-nama: phasesMoonBackground; tempoh animasi: 0.3s; animasi-fungsi-masa: kemudahan-keluar; kelewatan animasi: 0.3s; mod-isi-animasi: ke hadapan; } @keyframes phasesMoonBackground { 100% { background-image: url("./images/phases-of-the-moon-bg.svg" } }</pre> <p><strong>Edit: Tidak dapat menghidupkan imej latar belakang, sebaliknya gunakan kelegapan</strong></p> <p>Imej memudar dengan kecerunan, tetapi setelah membatalkan tuding, ia serta-merta bertukar kepada tiada imej dan bukannya pudar. </p> <pre class="brush:php;toolbar:false;">.elementor-section.elementor-element.product-card > .elemen-bekas .product-image::before { peralihan: semua 0.3s mudah masuk; jawatan: mutlak; lebar: 100%; ketinggian: 100%; background-repeat: tidak-ulang; saiz latar belakang: penutup; atas: 0; kiri: 0; paparan: blok; kandungan: ""; } .elementor-section.elementor-element.core-range > .elementor-container:hover .product-image::before { animasi: productCardBackgroundHover 0.3s kemudahan-keluar; mod-isi-animasi: ke hadapan; imej latar belakang: url("./images/core-range-bg.svg"); } .bahagian-elemen.elemen-elemen.fasa-bulan > .elementor-container:hover .product-image::before { animasi: productCardBackgroundHover 0.3s kemudahan-keluar; mod-isi-animasi: ke hadapan; imej latar belakang: url("./images/phases-of-the-moon-bg.svg"); } @keyframes productCardBackgroundHover { 0% { kelegapan: 0; 100% { kelegapan: 1; }</pre> <p><br /></p>

.elementor-section.elementor-element.product-card
   > .elementor-container
   .product-image::before {
   transition: opacity 0.3s ease-in-out;
   position: absolute;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   top: 0;
   left: 0;
   display: block;
   content: "";
   opacity: 0;
}

.elementor-section.elementor-element.core-range
   > .elementor-container
   .product-image::before {
   background-image: url("./images/core-range-bg.svg");
}

.elementor-section.elementor-element.core-range
   > .elementor-container:hover
   .product-image::before, 
.elementor-section.elementor-element.phases-of-the-moon
   > .elementor-container:hover
   .product-image::before {
   opacity: 1;
}

.elementor-section.elementor-element.phases-of-the-moon
   > .elementor-container
   .product-image::before {
   background-image: url("./images/phases-of-the-moon-bg.svg");
}