为什么我在 CSS 中使用 "width: 8%;" 后图像的宽度没有改变？

Question

我是新手，我试图用音符（只是一些图像）制作一个简单的网站，并希望将鼠标悬停在每个音符上时改变颜色。我知道我可以用 :hover 来做到这一点，但我想尝试使用 useState 来练习。我终于得到了切换功能（只是使它在悬停时改变颜色的功能）工作，但在这个过程中，宽度被搞乱了。 css 的所有其他部分（位置、颜色等）都在工作，所以我有点困惑为什么宽度保持原始宽度。这是我目前的代码。切换功能现在只在 note3 上，因为那是我正在玩的音符。

第一段代码基本上是我的 index.js 文件的一部分，其中包含我正在处理的音符。

const Body = () => {

    const [isNote3, setNote3] = useState("true");
    const ToggleNote3 = () =>{
        setNote3(!isNote3);
    }

    const [isB1, setB1] = useState("true");
    const ToggleB1 = () =>{
        setB1(!isB1);
    }

    return (
        <div>
            
                <div className="sheetmusic">
                <img className="sheet" src={sheetmusic} />
                </div>
                

            <div className="notes">
               
                <div className={isNote3 ? "note3" : "n3"}>
                <img onMouseEnter={ToggleNote3 } src={note1} /> 
                </div>
        
            </div>
           
        </div>
    )
}

第二个片段是与 note3 对应的相关 css。

.n3{
    filter: invert(100%) sepia(26%) saturate(5791%) hue-rotate(58deg) brightness(116%) contrast(101%); 
    left: 25%;
    position: absolute;
    max-width: 8%;
    max-height: auto;
    top: 30%;
}

.note3 {
    position: absolute;
    left: 25%;
    max-width: 8%;
    max-height: auto;
    top: 30%;
 }

这里也放一张我网站上的现状图。（大音符是当前切换的音符）。 3

我已经尝试了一段时间，但似乎并不知道这个问题。非常感谢任何帮助，非常感谢。

Answer 1

从您的 CSS 片段中，类 note3 和 n3 具有相同的 max-width 值，所以我不明白为什么宽度会改变。尝试使用不同的值。

编辑：在 CSS 中，默认情况下 img 宽度和高度设置为自动。所以你需要做的是添加 img { max-width: 100%; } 将所有图像限制在父容器的宽度内。参见 https://codesandbox.io/s/relaxed-mcnulty-p72by?file=/src/styles.css

为什么我在 CSS 中使用 "width: 8%;" 后图像的宽度没有改变？

Why isn't the width of an image changing after I use "width: 8%;" in CSS?

html

javascript

css

width

reactjs