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

发布于09月20日

我在一个图像列表上创建了一个效果，这样当鼠标经过时它就会放大，但当我转到这个列表时，整个列表执行的是效果，而不是所选的图像. 当前代码在所有图像上执行该效果，而不是只在一个图像上执行. 但是，我正确地 Select 了元素

#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);
                }
            }
        }
    }
}

推荐答案

根据您的代码，您似乎正在try 将转换仅添加到.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, .brand:focus {
    .figure{
        transform: scale(1.2) rotate(0.01deg);
    }
}

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

推荐答案

Css相关问答推荐

如何定位此下拉框的下拉面板

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

react native 容器样式

Next.js中的TailWind CSS类名称疑难解答

如何在css中创建文件div效果

Vuetify 抽屉标签溢出/z-index

如何在使用 bslib 5 的shiny 应用程序中使用样式参数排列 ui 元素

CSS Select 器 $parent > $child Select 嵌套列表中的所有
子元素

Angular 以Angular 获取当前聚焦的元素

Material UI Modal 因背景而变暗

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

和号 (&) 作为 SASS @mixin 中的变量

我在 ins 标签中有一个 img 标签，更改 ins 格式覆盖图像的视图

使用 CSS 无限期地闪烁两个不同持续时间的文本

CSS，居中的 div，缩小以适应？

CSS：背景图像和填充

属性nowrap被认为是过时的.建议使用较新的构造.它是什么？

单选按钮和标签显示在同一行

CSS 块格式化上下文是如何工作的？

多个和/或嵌套的 bootstrap 容器？