Html 父悬停上的子项上不兼容的css更改

我有以下html代码：

.logo{
显示：内联块；
宽度：30px；
位置：绝对位置；
最高：50%；
不透明度：0；
过渡：0.6s；
}
.container:hover.logo{
不透明度：1；
过渡：0.6s；
}
.容器：悬停.图片{
滤光片：亮度（0.7）；
过渡：0.6s；
}

福
酒吧

如果将位置设置为

相对

而不是

绝对

，则将显示两幅图像。当代码运行时，一个图像丢失了。（我在中替换了自己的图像，并添加了一个图片类来调整图像的大小）

不过，这种过渡效果很好

请尝试以下内容：

.logo{
显示：内联块；
宽度：100px；
//高度：自动；
位置：相对位置；
最高：50%；
不透明度：0；
过渡：0.6s；
}
.图片{
宽度：500px；
高度：自动；
浮动：左；
}
.container:hover.logo{
不透明度：1；
过渡：0.6s；
}
.容器：悬停.图片{
滤光片：亮度（0.7）；
过渡：0.6s；
}

福
酒吧

问题是什么？我猜问题的一部分丢失了！奇怪，我正要重写它。我发布了答案b4，我看到了编辑过的问题。。现在重读。是的，我把徽标放大到了100px——很难判断它是否在30px宽的范围内工作（甚至看得到！）。谢谢你，瑞秋！有趣的行为是看到定位只在悬停时才会引起麻烦。@Guillaume总是乐于帮助！：）@Guillaume没有图片类这一事实也起了作用（除非你有css，但没有发布它）。。值得注意的是。。如果你不给图片加一个尺寸，那么它们可能会以不同的方式显示，比如在这里（转换仍然有效，但对齐方式会有所不同）-只是一个提示！