Question

我希望在悬停在另一个上时更改div的背景颜色。第一个div将是黑色，但悬停时不会改变。当鼠标悬停在第二个div上时，背景将变为黑色，第一个div将变为白色。我以前做过这个，但似乎它不再起作用了。

CSS

.svart {
    background-color: black;
}

.hvit {
    background-color: white;
}

.hvit:hover {
    background-color: black;
}

HTML

 <div id="bestill_forside" class="svart">
    One
    </div>

    <div id="lear_forside" class="hvit">
    Two
</div>

我尝试了以下内容：

.hvit:hover .svart {
        background-color: white;
}

.hvit:hover + .svart {
        background-color: white;
}

.hvit:hover > .svart {
        background-color: white;
}

Answer 1

.svart必须低于文档中的.hvit，您无法在CSS中选择以前的元素：

    <div id="lear_forside" class="hvit">
    Two
    </div>
    <div id="bestill_forside" class="svart">
    One
    </div>

您的CSS选择器正在做什么：

.hvit:hover .svart {
        background-color: white; */This Selected .svart inside of .hvit*/
}

.hvit:hover + .svart {
        background-color: white; */This Selected .svart that was a immediate sibling of .hvit*/
}

.hvit:hover > .svart {
        background-color: white; */This Selected .svart that was a direct child of .hvit*/
}

了解有关CSS选择器的更多信息：
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

悬停特定的div - 更改另一个div

1 个答案: