为什么我的代码脚本不执行此CSS类？

Question

我想知道为什么即使在回显脚本中提到了这个名为“ grow”的图像弹出类也不执行。

这是PHP代码：

<!ELEMENT showdetails (nameofshow, information)+ >

这是CSS代码：

echo "<a href='$file'><img class='grow' src='$file' alt='$filename'></a><br>";

在我尝试将其放入CSS类之前就可以了。我在做什么错了？

非常感谢您的帮助。

Answer 1

类名“增长”已引用该图像。因此无需：

.grow img {
     transition:transform 0.25s ease;
}

.grow img:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

改为使用此CSS

.grow {
     transition:transform 0.25s ease;
}

.grow:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

Answer 2

您的问题是您在CSS中使用的选择器。当前，它正在寻找具有.grow类的元素，然后在该元素中搜索图像子级。例如，如果为锚点<a>提供了类grow，那么CSS就可以工作。

以下代码是您的PHP代码的正确选择：

img.grow {
    transition:transform 0.25s ease;
}

img.grow:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

其工作原理的解释：选择器正在使用类<img>搜索grow。