2

请查看下面的链接

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);
}
4

2 回答 2

5

改变 #f11:hover + #floater

到

#f11:hover ~ #floater

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

于 2012-09-26T11:51:30.197 回答
1

检查这个链接

您因为没有显示任何颜色而丢失;了您的，并且您的 ' 距离不远，这会导致功能损坏。给（或更多）给。并且还像@ClydeLobo 所说的那样使用选择器。background:blackdivtop:50px;#f12sibling

于 2012-09-26T11:59:56.633 回答