CSS - 嵌套元素，选择另一个嵌套元素而不使用Javascript

Question

我希望能够将鼠标悬停在“内部”元素上，并显示“hoverbar”元素。我遇到的问题是元素嵌套在不同的父母身上。我知道使用javascript会更容易但我想知道如果可能的话如何使用CSS。

这就是我尝试这样做的方式

.inner:hover + .other-content .hoverbar{
visibility:visible;}

http://jsfiddle.net/UaXUS/931/

Answer 1

您只能为兄弟姐妹应用样式。您无法选择父级。因此，如果您想要设置.hoverbar样式，可以通过以下两种方式执行此操作：

第一个是更改选择器：

.content:hover + .other-content .hoverbar {
    visibility:visible;
}

第二是更改HTML：

将other-content移至content的孩子：

*{
    margin:0;
    padding:0;
}
.content{
    height:100%;
    width:100%;
    background-color:red;
    padding:0;
    margin:0;
    position:absolute;
}
.hoverbar{
    height:10%;
    width:100%;
    background-color:blue;
    position:absolute;
    bottom:0;
    margin:0;
    padding:0;
    visibility:hidden;
}
.inner:hover + .other-content > .hoverbar{
    visibility:visible;
}

<div class="content">
        <div class="inner">Inner
        </div>
        <div class="other-content">
            <div class="hoverbar">hoverbar
            </div>
        </div>
    </div>