css - CSS3 悬停和活动问题

Question

尝试制作 CSS 功能图：

CSS

.fader-us {
    display: none;
}

.fader-us-content {
    display: none;
    position: fixed;
    top:50px;
    left:50px;
    z-index:81;
}
    .fader-us:active .fader-us-content {
        display:block;
    }
        .fader-us:active .us {
            opacity:0;
        }

    .fader-us-content:hover {
        display: block;
    }
        .fader-us-content:hover .us {
            opacity:0;
        }

        .fader-us img {
            line-height: 0;
            z-index:79;
            -webkit-transition: all 0.3s ease;
            -moz-transition:    all 0.3s ease;
            -o-transition:      all 0.3s ease;
            -ms-transition:     all 0.3s ease;
            transition:         all 0.3s ease; 
        }

        .us {
            position:fixed;
            top:33px;
            left:55px;
            z-index:0;
        }

HTML

        <div class="fader-us">
            <img class ="us" src="us.png" alt="">
            <div class="fader-us-content">
                <li>California</li>
                <li>Florida</li>
            </div>
        </div>

当我的鼠标悬停在“fader-us-content”上时，我想要做的是让 us.png img 消失。无法弄清楚为什么只有当我继续点击时图像才会消失。

小提琴

http://jsfiddle.net/r9qHa/

Answer 1

使用 '~' 可能是一个好方法：

.fader-us-content:hover~.us {
    opacity:0;
}

像这样更改html：

<div class="fader-us">
    <div class="text">
        <p>USAs</p>
    </div>
    <ul class="fader-us-content">
        <li>California</li>
        <li>Florida</li>
    </ul>
    <img class ="us" src="http://s23.postimg.org/rixm8ire3/image.png" alt=""/>
</div>

jsfiddle.net

Answer 2

尝试改变这个：

    <div class="fader-us">
        <img class ="us" src="us.png" alt="">
        <div class="fader-us-content">
            <li>California</li>
            <li>Florida</li>
        </div>
    </div>

.fader-us:active .fader-us-content {
        display:block;
    }

对此：

<div class="fader-us">
        <img class ="us" src="us.png" alt="">
        <div class="fader-us-content">
          <ul>
            <li>California</li>
            <li>Florida</li>
          </ul>
        </div>
    </div>

.fader-us:active .fader-us-content:hover {
        display:block;
    }

Answer 3

Working FIDDLE Demo

在样式的末尾添加此规则：

.fader-us:hover .fader-us-content {
    display:block;
}

.fader-us:hover .us { opacity: 0; }