如何用CSS实现悬停/点击时的宽度动画？求助右侧区域展开异常

Hey there! Let's fix those issues step by step—your idea for the hover-expand layout is really cool, just a few tweaks needed to get it working right.

What's causing the problems? #

• No wrapping container: Your two sections are directly in the <body> with float:left on the right one. When you set the right section to width:100%, it starts at the 50% mark of the page, so it spills outside the viewport.
• Video blocking hover: The <video> elements are sitting on top of your section content (and the section itself), which might prevent the hover event from triggering consistently (that's why you only see it work when clicking the text areas).
• Inconsistent transition setup: Your CSS has duplicate styles for the left/right sections, and the right section's transition uses ease-in without specifying which property to transition.

Fixed Code #

First, update your HTML to wrap the sections in a container and clean up duplicate IDs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gucci Collections</title>
</head>
<body>
    <div class="header">
        <div class="header-container">
            <img src="/Images/GucciWhite.png" alt="gucciLogo" width="225px" height="auto">
            <p> COLLECTIONS </p>
        </div>
    </div>
    <!-- Container to control flex layout -->
    <div class="home-container">
        <div class="section left" id="women-section">
            <div class="html-component women">
                <div class="title" id="women">WOMEN'S</div>
                <div class="sub-title">Discover this week the latest pieces from our latest collection<br>Fall Winter 2020 Woman<br>Selected pieces with new pictures curated for you</div>
                <div class="button">VIEW</div>
            </div>
            <video autoplay muted loop class="section-video">
                <source src="/videos/gucci2.mp4" type="video/mp4">
            </video>
        </div>
        <div class="section right" id="men-section">
            <div class="html-component men">
                <div class="title"> MEN'S</div>
                <div class="sub-title">Discover this week the latest pieces from our latest collection<br>Fall Winter 2020 Man<br>Selected pieces with new pictures curated for you</div>
                <div class="button"> VIEW</div>
            </div>
            <video autoplay muted loop class="section-video">
                <source src="/videos/gucci1.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</body>
</html>

Now update your CSS with flex layout fixes, video positioning, and consistent transitions:

/* Reset default browser styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* Header styles (keep your existing styles, added here for completeness) */
.header {
    position: relative;
    z-index: 10;
    padding: 1rem;
    color: white;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Flex container to hold both sections */
.home-container {
    display: flex;
    width: 100%;
    height: calc(100vh - 6rem); /* Adjust based on your header's actual height */
    overflow: hidden;
}

/* Base style for both sections */
.section {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: width 1s ease; /* Smooth, consistent width transition */
    background-color: black;
}

/* Hover logic: expand the hovered section, shrink the other */
.home-container:hover .section:not(:hover) {
    width: 0;
}

.section:hover {
    width: 100%;
}

/* Video styling - send to background so it doesn't block hover */
.section-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keep video aspect ratio without distortion */
    z-index: -1; /* Put video behind text content */
}

/* Content styles (adjust to match your design) */
.html-component {
    color: white;
    text-align: center;
    z-index: 2;
    padding: 2rem;
}

.title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.sub-title {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.button {
    border: 1px solid white;
    padding: 0.8rem 2rem;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: rgba(255,255,255,0.1);
}

Key Fixes Explained #

1. Flex Container: The .home-container uses flexbox to keep both sections aligned in a row. When you hover one section, the other shrinks to 0 width, eliminating overflow entirely.
2. Video Positioning: Videos are set to position:absolute with z-index:-1, so they act as background elements and don't block the hover event on the section.
3. Consistent Transitions: A single transition rule on the .section class ensures both sections animate smoothly. The :not(:hover) selector automatically handles shrinking the non-hovered section.
4. Duplicate IDs Fixed: Removed duplicate gucciVideo IDs (HTML requires unique IDs for all elements).

Now when you hover either section, it'll expand smoothly to full screen—left from left to right, right from right to left—without overflowing the page. The hover will work anywhere on the section, not just the text!

内容的提问来源于stack exchange，提问作者o97