：悬停不正常

Question

请查看以下链接

http://jsfiddle.net/9AbvE/291/

当我将鼠标悬停在元素div id = f12上时，div id = floater会改变背景颜色，但当我将鼠标悬停在div id = f11上时，它不会改变颜色，任何人都知道为什么？

非常感谢！

仅限严格的CSS解决方案，谢谢！

这里有css供查看

#f11
{
    width: 100px;
    height: 50px;
    position: absolute;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=0);
    border-width: 1px;
    border-style: inset;
}
#f11:hover + #floater
{
    background:blue;
    width: 320px;
    height: 320px;
    opacity:100;
    right:0;
    filter: alpha(opacity=100);
    float: left;
    position: fixed;
}

#f12
{
    width: 100px;
    height: 50px;
    position: absolute;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=0);
    border-width: 1px;
    border-style: inset;
}

#f12:hover + #floater
{
    background:blue;
    width: 320px;
    height: 320px;
    opacity:100;
    right:0;
    filter: alpha(opacity=100);
    float: left;
    position: fixed;
}

#floater
{
    width: 320px;
    height:320px;
    opacity:0;
    position: fixed;
    right:0;
    filter: alpha(opacity=0);
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    transition: 1s all;
    border-width: 1px;
    border-style: inset;
    filter: alpha(opacity=100);
}

Answer 1

更改 #f11:hover + #floater

到

#f11:hover ~ #floater

+用于元素之后的直接兄弟，而~用于元素之后的任何兄弟

Answer 2

检查此link

您遗失了; background:black，因为它没有显示任何颜色而且您的div距离不远，导致功能损坏。将top:50px;（或更多）提交给#f12。 并且还使用sibling选择器作为@ClydeLobo说。