将鼠标悬停在具有效果的元素上

Question

我在图像列表上创建了一个效果，以便当鼠标经过时它会放大，但是当我转到此列表时，整个列表都会执行该效果，而不是所选图像。 当前代码对所有图像而不是仅对一张图像执行效果。 但是，我正确选择了元素

#homebrands {
    .brands {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .brand{
            position: relative;
            padding: 0 1rem 0 1rem;
            .figure {
                transition: transform 0.4s;
            }
        }
    }
    &:hover, &:focus {
        .brands{
            .brand{
                .figure{
                    transform: scale(1.2) rotate(0.01deg);
                }
            }
        }
    }
}

Answer 1

根据您的代码，您似乎正在尝试仅向

.figure

类中的对象添加转换。现在，

#homebrands

下的所有内容都会影响

#homebrands

发生的情况。要解决此问题，请从

#homebrands

移除悬停，以免对其产生影响。如果没有您的 HTML，我无法告诉您在悬停时要更改什么，但这就是您的代码应该是什么样子，假设您希望每个

.brand

在悬停时放大。

#homebrands {
    .brands {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .brand{
            position: relative;
            padding: 0 1rem 0 1rem;
            .figure {
                transition: transform 0.4s;
            }
        }
    }
}

/* This is moved: */
.brand { 
    &:hover, &:focus { 
        .figure { 
            transform: scale(1.4) rotate(0.01deg); 
        } 
    } 
}