CSS3悬停和活动问题

正在尝试制作CSS功能映射：

CSS HTML

加州
佛罗里达州

当我的鼠标在“fader us content”上时，我想做的是让us.png img消失。 我不明白为什么只有在我不断点击的时候图像才会消失

不停摆弄 尝试更改此选项：

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

加州
佛罗里达州
.音量控制器us:活动。音量控制器us内容{
显示：块；
}

为此：

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

加州
佛罗里达州

.音量控制器us:活动。音量控制器us内容：悬停{
显示：块；
}

使用“~”可能是一种好方法：

.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>

美国


加州
佛罗里达州

在样式末尾添加以下规则：

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

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

---

为我们提供一把小提琴怎么样？首先，你不能在那样的div中包含列表项，它们必须进入

或

@bfavaretto感谢你的注释。什么是小提琴？@bfavareto真棒没用。我想让img类“我们”消失。你写的东西让“fader us content”在你点击它时消失了。它像魔术一样工作！我把标签留在上面时，它坏了。。为什么呢？那么，~意味着什么？~意味着选择元素的下一个兄弟元素。因此需要将其放在

后面，以让“.fader us content:hover~.us”起作用。

<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>

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

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