Question

我如何根据另一个容器的悬停状态隐藏或显示容器中包含的元素？

以下是我到目前为止的例子：

HTML5

<div class="left-menu-container">
    <div class="left-menu-inner-container">
        <div class="left-menu-item-container">
            <a href="AppsDashboard" class="left-menu-link">
                <div class="left-menu-item-first">
                    Find an Application
                </div>
            </a>
            <div class="sub-menu">
                <input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
            </div>
        </div>
    </div>
</div>

CSS3

div.left-menu-container {
    float: left;
    width: 19%;
    padding-right: 1%;
}

div.left-menu-inner-container {
    width: 100%;
}
div.left-menu-item-container
{
    width:100%;
}

div.left-menu-item-first {
    width: 93%;
    border: 1px solid #999;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    transition: 0.15s ease-in-out;
    color: black;
    min-height: 26px;
    padding-left: 1%;
}

    div.left-menu-item-first:hover {
        width: 97%;
        border: 1px solid #999;
        color: white;
        background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
        padding-left: 3%;
    }

div.left-menu-item-container .sub-menu {
    width: 97%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    padding-left: 3%;
    display: none;

}

div.left-menu-item-first:hover left-menu-item-container.sub-menu {
    position:absolute;
    width: 80%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    float:left;
    display: block;
    z-index: 1000;
    float: left;
}

然而，这根本行不通。将鼠标悬停在left-menu-item-first div上不会显示submenu父级中包含的left-menu-item-container。他们是否真的绝对必须是父母的孩子才能使用Pure CSS？我可以并且已经有一个JQuery版本设置并且正在进行但我希望仅在可能的情况下通过CSS进行。

Answer 1

由于没有CSS父选择器，请尝试更改html，使悬停的项目成为left-menu-item-container.sub-menu的兄弟尝试使用CSS sibling selector：

变化：

div.left-menu-item-first:hover left-menu-item-container.sub-menu

到

div.left-menu-item-first:hover + left-menu-item-container.sub-menu

或者

变化：

div.left-menu-item-first:hover left-menu-item-container.sub-menu

到

.left-menu-link:hover + left-menu-item-container.sub-menu

Answer 2

您只能在悬停时更改子元素和兄弟元素，而不是完全不同的元素。

如果您将子菜单放在第一个菜单元素后面，则可以使用兄弟选择器+，如下所示：

＆＃13;

div.left-menu-container {
    float: left;
    width: 19%;
    padding-right: 1%;
}

div.left-menu-inner-container {
    width: 100%;
}
div.left-menu-item-container
{
    width:100%;
}

div.left-menu-item-first {
    width: 93%;
    border: 1px solid #999;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    transition: 0.15s ease-in-out;
    color: black;
    min-height: 26px;
    padding-left: 1%;
}

    div.left-menu-item-first:hover {
        width: 97%;
        border: 1px solid #999;
        color: white;
        background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
        padding-left: 3%;
    }

div.left-menu-item-container .sub-menu {
    width: 97%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    padding-left: 3%;
    display: none;

}

.left-menu-link:hover + .sub-menu {
    position:absolute;
    width: 80%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    float:left;
    display: block;
    z-index: 1000;
    float: left;
}

＆＃13;

<div class="left-menu-container">
    <div class="left-menu-inner-container">
        <div class="left-menu-item-container">
          <span class="AppsDashboard">
            <a href="AppsDashboard1" class="left-menu-link">
                <div class="left-menu-item-first">
                    Find an Application
                </div>
            </a>
            <div class="sub-menu">
                <input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
            </div>
            </span>
        </div>
    </div>
</div>

＆＃13;

隐藏另一个父级的元素

2 个答案: