css3悬停图片幻灯片，无法正常工作

Question

问题是当#blue悬停时#red不会改变大小，但是当#green悬停时它会起作用。

#red:hover +#blue{
    width:50px;
    transition:0.5s;
}

JS FIDDLE

Answer 1

您可以使用~代替+，因为#blue不是您#red的下一个兄弟：

#red:hover ~#blue{
    width:50px;
    transition:0.5s;
}

<强> Updated Fiddle

Answer 2

将+更改为~。

加号仅影响下一个元素。 （测试它。用红色元素改变绿色元素。所以红色会起作用，绿色不起作用。）

如果您将+替换为~，则会影响所有其他人。

Codepen Demo