CSS悬停问题

Question

悬停在我的图像上不起作用。老实说，我不知道为什么。图片在一个名为portfolio的div类中，如下面的代码所示

.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img{
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__img:hover {
transform: scale(2);
opacity: .75;
}

Answer 1

悬停正在(portfolio__img(上执行。div的类是(portfolio__item(。

这就是问题所在。尝试用公文包__img 替换类名

Answer 2

您的CSS中有一些错误类型：

1. 冒号和hover之间不应该有空格——它是一个伪选择器，写为:hover：

(我删除了opacity后关于结肠的行，因为我误读了它，感谢@pete的更正。

.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img:hover { /* no space here between : and hover */
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__img:hover { /* no space here between : and hover */
transform: scale(2);
opacity: .75;
}

此外，正如@bouh在评论中指出的那样，在你的标记中没有.portfolio__img类的元素，所以这个选择器不会匹配任何元素。

如果我们把这两件事结合起来，我们应该有一个工作的例子：

.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img:hover {
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1), opacity 250ms linear;
}
.portfolio__img:hover {
transform: scale(2);
opacity: .75;
}

<div class="portfolio">
<a href="#" class="portfolio__item">
<p class="portfolio__img" src="../imagefolder/me.jpeg" alt="me">test test test</p>
</a>
</div>