admin管理员组

文章数量:1416059

I'm building a set of boxes which animate on hover.

The first box should be open ('active') on page load then act like the others once you start interact with the other boxes.

It works great on Mobile but I have a glitch on Desktop I'd love some assistance with.

The glitch: the first box remains 'active' even when I interact with other boxes. It should instead 'collapse' like the others do. I feel this is to do with my CSS and would love some help resolvng this.

I've included my scripts and a JSFiddle.

document.addEventListener("DOMContentLoaded", function () {
    const templateContainer = document.querySelector(".elementor-element-787c298e"); // Unique template identifier
    
    const boxes = templateContainer.querySelectorAll(".e-con-inner > .e-child");

        if (boxes.length > 0) {
            boxes[0].classList.add("active"); // First box is active by default on mobile
        }

    if (templateContainer && window.innerWidth <= 767) { // Apply to Mobile only
        

        boxes.forEach((box) => {
            box.addEventListener("click", function () {
                // Remove active class from all boxes inside this template
                boxes.forEach((b) => {
                    b.classList.remove("active");
                    b.style.backgroundColor = "transparent"; // Reset background color
                });

                // Add active class only to the clicked box
                this.classList.add("active");
                this.style.backgroundColor = "#E1E8EA"; // Set active background color
            });
        });
    }
});
.e-con-inner {
    display: flex;
    gap: 16px;
}

/* Default state for all boxes */
 .e-con-inner > .e-child {
    flex: 1;
    min-height: 150px; /* Default height for all boxes */
    transition: flex-grow 0.4s ease-in-out, font-size 0.4s ease-in-out, background-color 0.4s ease-in-out, border 0.4s ease-in-out;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #E1E8EA; /* All boxes have a border */
    background-color: transparent;
}

/* Hover effect: Expand box & change background */
 .e-con-inner > .e-child:hover {
    flex-grow: 2;
    background-color: #E1E8EA;
    border: 1px solid #E1E8EA;
}

/* Reset flex-grow for non-hovered boxes */
 .e-con-inner > .e-child {
    flex-grow: 1;
    background-color: transparent;
    border: 1px solid #E1E8EA;
}

/* Ensure first box expanded by default */
 .e-con-inner > .e-child:first-child {
    flex-grow: 2;
    background-color: #E1E8EA;
}

/* Hover effect: Expand first box & change background */
 .e-con-inner > .e-child:hover,
 .e-con-inner > .e-child.active {
    flex-grow: 2;
    background-color: #E1E8EA;
    border: 1px solid #E1E8EA;
}

/* Desktop-specific styles */
@media (min-width: 768px) {
     .e-con-inner > .e-child:first-child {
        /* Ensure first box is expanded and visible on page load */
        flex-grow: 2;
        background-color: #E1E8EA;
    }

    /* Ensure hover-text is visible for the first box when the page loads */
     .e-con-inner > .e-child:first-child .hover-text {
        opacity: 1!important;
        visibility: visible!important;
    }

    /* Reset first box when another box is hovered */
     .e-con-inner > .e-child:first-child:not(:hover) {
        font-size: 24px;
    }

     .e-con-inner > .e-child:first-child:not(:hover) .hover-text {
        opacity: 0;
        visibility: hidden;
    }

     .e-con-inner > .e-child:first-child:not(:hover) img {
        transform: scale(1);
    }

    /* Adjust first box when hovered again */
     .e-con-inner > .e-child:first-child:hover {
        flex-grow: 2;
        background-color: #E1E8EA;
    }
}

/* Default heading size */
 .e-child h3 {
    transition: font-size 0.4s ease-in-out;
    font-size: 24px;
}

/* Increase heading size for expanded box */
 .e-child:hover h3,
 .e-child.active h3,
 .e-con-inner > .e-child:first-child h3 {
    font-size: 40px;
}

/* Hide hover-text by default */
 .e-child .hover-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    padding: 10px;
}

/* Show hover-text for expanded box */
 .e-child:hover .hover-text,
 .e-child.active .hover-text,
 .e-con-inner > .e-child:first-child .hover-text {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
}

/* Default image styling */
 .e-child img {
    transition: transform 0.3s ease-in-out;
    display: block;
    margin-bottom: 10px;
}

/* Enlarge image for expanded box */
 .e-child:hover img,
 .e-child.active img,
 .e-con-inner > .e-child:first-child img {
    transform: scale(1.2);
}

/* Mobile-specific styles */
@media (max-width: 767px) {
     .e-con-inner {
        flex-direction: column;
    }

    /* Default mobile box size */
     .e-con-inner > .e-child {
        min-height: 150px; /* Default size for all boxes */
    }

    /* Expanded mobile box */
     .e-con-inner > .e-child.active {
        min-height: 250px !important; /* Increased height for active box */
    }

    /* Reset first box when another is tapped */
     .e-con-inner > .e-child:not(.active) h3 {
        font-size: 24px;
    }

     .e-con-inner > .e-child:not(.active) .hover-text {
        opacity: 0;
        visibility: hidden;
    }

     .e-con-inner > .e-child:not(.active) img {
        transform: scale(1);
    }
}

/* Desktop-specific adjustments for smoother transitions */
@media (min-width: 768px) {
     .e-con-inner {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }

    /* Slower transition on Desktop */
     .e-con-inner > .e-child {
        transition: flex-grow 0.8s ease-in-out, min-height 0.8s ease-in-out, font-size 0.4s ease-in-out, background-color 0.4s ease-in-out, border 0.4s ease-in-out;
    }

    /* Remove background color and reset height on unhovered boxes */
     .e-con-inner > .e-child:not(.active) {
        min-height: 250px;
    }

    /* Active state styling */
     .e-con-inner > .e-child.active {
        min-height: 250px; /* Increased height for active box */
    }
}
<div class="elementor-element elementor-element-787c298e e-flex e-con-boxed e-con e-parent" data-element_type="container" data-id="787c298e" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
    <div class="e-con-inner">
        <div class="elementor-element elementor-element-1fbd3fa5 e-con-full e-flex e-con e-child" data-element_type="container" data-id="1fbd3fa5">
            <div class="elementor-element elementor-element-5cd81860 elementor-widget elementor-widget-image" data-element_type="widget" data-id="5cd81860" data-widget_type="image.default">
                <div class="elementor-widget-container"><img alt="" class="attachment-large size-large wp-image-5437" height="32" src="/wp-content/uploads/2025/03/Group-190.svg" width="32"></div>
            </div>
            <div class="elementor-element elementor-element-1563f153 elementor-widget elementor-widget-heading" data-element_type="widget" data-id="1563f153" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                    <h3 class="elementor-heading-title elementor-size-default">Build</h3>
                </div>
            </div>
            <div class="elementor-element elementor-element-4082ecc8 hover-text elementor-widget elementor-widget-text-editor" data-element_type="widget" data-id="4082ecc8" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <p>Test text here</p>
                </div>
            </div>
        </div>
        <div class="elementor-element elementor-element-6eefa8f4 e-con-full e-flex e-con e-child" data-element_type="container" data-id="6eefa8f4">
            <div class="elementor-element elementor-element-70e4825f elementor-widget elementor-widget-image" data-element_type="widget" data-id="70e4825f" data-widget_type="image.default">
                <div class="elementor-widget-container"><img alt="" class="attachment-large size-large wp-image-5459" height="24" src="/wp-content/uploads/2025/03/Group-191.svg" width="24"></div>
            </div>
            <div class="elementor-element elementor-element-41d2e719 elementor-widget elementor-widget-heading" data-element_type="widget" data-id="41d2e719" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                    <h3 class="elementor-heading-title elementor-size-default">Launch</h3>
                </div>
            </div>
            <div class="elementor-element elementor-element-2258981e hover-text elementor-widget elementor-widget-text-editor" data-element_type="widget" data-id="2258981e" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <p>Test text here</p>
                </div>
            </div>
        </div>
        <div class="elementor-element elementor-element-1243c540 e-con-full e-flex e-con e-child" data-element_type="container" data-id="1243c540">
            <div class="elementor-element elementor-element-1d6bf19 elementor-widget elementor-widget-image" data-element_type="widget" data-id="1d6bf19" data-widget_type="image.default">
                <div class="elementor-widget-container"><img alt="" class="attachment-large size-large wp-image-5461" height="24" src="/wp-content/uploads/2025/03/Group-192.svg" width="24"></div>
            </div>
            <div class="elementor-element elementor-element-1a2be4e0 elementor-widget elementor-widget-heading" data-element_type="widget" data-id="1a2be4e0" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                    <h3 class="elementor-heading-title elementor-size-default">Scale</h3>
                </div>
            </div>
            <div class="elementor-element elementor-element-438e21c hover-text elementor-widget elementor-widget-text-editor" data-element_type="widget" data-id="438e21c" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <p>Test text here</p>
                </div>
            </div>
        </div>
        <div class="elementor-element elementor-element-7bb54188 e-con-full e-flex e-con e-child" data-element_type="container" data-id="7bb54188">
            <div class="elementor-element elementor-element-2d0407d5 elementor-widget elementor-widget-image" data-element_type="widget" data-id="2d0407d5" data-widget_type="image.default">
                <div class="elementor-widget-container"><img alt="" class="attachment-large size-large wp-image-5463" height="24" src="/wp-content/uploads/2025/03/Path-4434.svg" width="21"></div>
            </div>
            <div class="elementor-element elementor-element-b929e61 elementor-widget elementor-widget-heading" data-element_type="widget" data-id="b929e61" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                    <h3 class="elementor-heading-title elementor-size-default">Feedback</h3>
                </div>
            </div>
            <div class="elementor-element elementor-element-7bffb194 hover-text elementor-widget elementor-widget-text-editor" data-element_type="widget" data-id="7bffb194" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <p>Test text here</p>
                </div>
            </div>
        </div>
        <div class="elementor-element elementor-element-1f8657e1 e-con-full e-flex e-con e-child" data-element_type="container" data-id="1f8657e1">
            <div class="elementor-element elementor-element-71a67d51 elementor-widget elementor-widget-image" data-element_type="widget" data-id="71a67d51" data-widget_type="image.default">
                <div class="elementor-widget-container"><img alt="" class="attachment-large size-large wp-image-5465" height="24" src="/wp-content/uploads/2025/03/Path-4435.svg" width="23"></div>
            </div>
            <div class="elementor-element elementor-element-256d48fc elementor-widget elementor-widget-heading" data-element_type="widget" data-id="256d48fc" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                    <h3 class="elementor-heading-title elementor-size-default">Optimise</h3>
                </div>
            </div>
            <div class="elementor-element elementor-element-1443d7e hover-text elementor-widget elementor-widget-text-editor" data-element_type="widget" data-id="1443d7e" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <p>Test text here</p>
                </div>
            </div>
        </div>
    </div>
</div>

本文标签： cssAnimated Boxes glitch on DesktopStack Overflow

版权声明：本文标题：css - Animated Boxes glitch on Desktop - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744704703a2620773.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。