动态更改 classList 时未应用样式

Question

好吧，我使用 React 构建一个 Web 应用程序，我有一个名为 slice 的组件，其中包含两个项目组件，我想根据悬停事件更改它们的宽度。我知道该类已添加到类列表中，但样式尚未应用。我尝试更改其他样式作为指示器，看看这是否只是宽度或类列表的问题，但这也不起作用。

slice.js：

import { useState, useEffect } from "react";
import Project from "./Project";
import "./Slice.css";
import { v4 as uuidv4 } from "uuid";

export default function Slice(props) {
    const data = props.sliceData.projects;
    const [projectElements, setProjectElements] = useState([]);
    const projectUIDs = [uuidv4(), uuidv4()];

    useEffect(() => {
        const elements = [
            document.getElementById(projectUIDs[0]),
            document.getElementById(projectUIDs[1]),
        ];
        setProjectElements(elements);

        return () => {
            elements.forEach((element, index) => {
                if (element) {
                    element.removeEventListener("mouseover", () =>
                        handleMouseOver(index)
                    );
                    element.removeEventListener("mouseout", () =>
                        handleMouseOut(index)
                    );
                }
            });
        };
    }, []);

    const handleMouseOver = (index) => {
        projectElements[index].classList.add("maximize");
        projectElements[index ^ 1].classList.add("minimize");
    };

    const handleMouseOut = (index) => {
        projectElements[index].classList.remove("maximize");
        projectElements[index ^ 1].classList.remove("minimize");
    };

    const generateProjects = () => {
        return data.map((project, index) => (
            <Project
                key={uuidv4()}
                uid={projectUIDs[index]}
                projectData={project}
                onMouseEnter={() => handleMouseOver(index)}
                onMouseLeave={() => handleMouseOut(index)}
            />
        ));
    };

    return <div className="slice">{generateProjects()}</div>;
}

切片.css：

.slice {
    height: 50vh;
    width: 100%;
    display: flex;
}

.projectWrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: black;
    padding: 2rem;
    overflow: hidden;
    transition: flex-grow 0.5s ease-in-out;
    width: 100%; /* Ensure each projectWrapper occupies the full width */
}

.projectWrapper img {
    flex: 1; /* Use flex shorthand to distribute space equally */
    max-width: 50%; /* Set maximum width for the image */
}

.projectWrapper h1 {
    flex: 1; /* Use flex shorthand to distribute space equally */
    font-size: 2rem;
    font-weight: 700;
    max-width: 40%; /* Set maximum width for the h1 element */
}
.minimized{
    flex-grow: 0;
}
.maximized{
    flex-grow: 1;
}




@media (max-aspect-ratio: 155/100) {
    .slice{
        flex-direction: column;
        height: fit-content;
    }
    .projectWrapper{
        height: 50vh;
    }
}

@media (max-width: 450px) {
    .projectWrapper{
        flex-direction: column;
        align-items: center;
    }
    .projectWrapper h1{
        text-align: center;
        width: 80%;
        max-width: none;
    }
    .projectWrapper img{
        width: 80%;
        max-width: none;
    }
}

我希望 .minimized 和 .maximized 类中的样式能够在悬停时应用于项目组件

Answer 1

我发现有一个小错字限制了你达到上述结果。

projectElements[index].classList.add("maximize");

正在添加

maximize

类，但在CSS文件中您已经编写了

maximized

类。

如果这不起作用，请随时提出进一步的问题。