:hover not working properly

Question

Please view the link below

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

What happens is that when I hover over element div id = f12 the div id = floater will change background color, but when I hover over div id = f11, it doesnt change color, anyone has any idea why ?

Much thanks!

Strictly CSS solutions only, thanks!

Here is there css for viewing

#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

check this link

You were missing ; from your background:black because of that it was not showing any color and your div's are not far away which is leading to corrupt function. Give top:50px; (or more) to #f12. and also use the sibling selector as @ClydeLobo said.

Answer 2

Change #f11:hover + #floater

to

#f11:hover ~ #floater

+ is for immediate sibling after element whereas ~ is for any sibling after element