CSS/HTML：悬停图像，设置文本动画无效

我想在悬停图像时滑动文本

{transform:scale（1.3）translate（0px，40px）；}

（使用

class=“img”

），但我不知道为什么这不起作用

.img{
位置：相对位置；
利润率：50像素；
转变：转变0.5s；
边界半径：85px；
}
.img:悬停{
位置：相对位置；
光标：指针；
转换：缩放（1.3）转换（0px，-80px）；
z指数：100；
盒影：0 5px25px rgba（0,0,0,0.525）；
边界半径：85px；
}
.标题{
溢出：隐藏；
利润上限：-150px；
转变：转变0.5s；
}
.img:hover.caption{
转换：缩放（1.3）转换（0px，40px）；
溢出：自动；
}

井字过三关
双人游戏


战舰
双人游戏


毕达哥拉斯表
工具

规则选择器

.img:hover.caption

找不到工作，因为

.caption

不是

.img

的子项

一个简单的解决方案是使用

li

作为悬停目标：

.img{
位置：相对位置；
利润率：50像素；
转变：转变0.5s；
边界半径：85px；
}
李：悬停，img{
位置：相对位置；
光标：指针；
转换：缩放（1.3）转换（0px，-80px）；
z指数：100；
盒影：0 5px25px rgba（0,0,0,0.525）；
边界半径：85px；
}
.标题{
溢出：隐藏；
利润上限：-150px；
转变：转变0.5s；
}
李：悬停。说明{
转换：缩放（1.3）转换（0px，40px）；
溢出：自动；
}

井字过三关
双人游戏


战舰
双人游戏


毕达哥拉斯表
工具

当鼠标悬停在

img

上时，HTML结构中没有可能更改

.caption

的CSS方法，因为

img

较低一级，并且没有父选择器

但是

img

被包装在

a

标记中，

a

是

.content

的同级，因此您可以使用同级选择器：

li a:first-child + .caption

对于悬停：

li a:first-child:hover + .caption

我添加了

li

和

：first child

以仅选择代码中包含

img

的

a

元素，并使用class

.img

。但这并不是100%可靠（文档中的其他地方可能有类似的结构），因此最好在那些

a

标记上使用一个类，并在选择器中使用该类来明确排除任何其他

a

标记

.img{
位置：相对位置；
利润率：50像素；
转变：转变0.5s；
边界半径：85px；
}
.img:悬停{
位置：相对位置；
光标：指针；
转换：缩放（1.3）转换（0px，-80px）；
z指数：100；
盒影：0 5px25px rgba（0,0,0,0.525）；
边界半径：85px；
}
李a：第一个孩子+。说明{
溢出：隐藏；
利润上限：-150px；
转变：转变0.5s；
}
李a：第一个孩子：悬停+。说明{
转换：缩放（1.3）转换（0px，40px）；
溢出：自动；
}

井字过三关
双人游戏


战舰
双人游戏


毕达哥拉斯表
工具

您正在尝试做一些仅用css和html结构无法实现的事情。如果您想这样做，您需要使用js或jQuery<代码>：hover元素最多只能在同级上工作。但这里你试图修改一个父母兄弟姐妹。我知道，但我的老师告诉我们，没有jsOk，那么是的，作为一个好答案。你们必须至少在图片的父级上做。非常感谢你们，现在它可以工作了。