Question

是否有可能触发对与悬停div完全无关的元素的CSS更改？

我在下拉菜单上有一个CSS悬停效果，我还想在页面底部触发div的不透明度以创建背景叠加效果。

这是我使用的CSS：

#overlay {
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:120px;
    left:0;
    z-index:0;
    height:120%;
    width:100%;
    visibility:hidden;
    opacity:0;
}
#menu-main-menu li.menu-parent-item:hover ul.sub-menu,
#menu-main-menu li.menu-parent-item:hover #overlay {
    visibility:visible;
    opacity:1;
}

子菜单的悬停工作正常，但div #overlay位于页面底部，并且在它悬停时不会被调用。

我尝试了各种替代方案，例如：hover＆gt; #overlay，：hover + #overlay，但似乎什么都没有触发它。我似乎无法找到问题的明确答案。

有可能吗？

Answer 1

是。你可以在php文件中加载这个样式，然后在你的div被悬停时使用jQuery来应用css。

Answer 2

没有办法在css中选择父元素，这意味着你无法在层次结构中向上移动。

<ul class="hover-parent">
    <li></li>
</ul>
<div>Something here</div>
<div class="target"></div>

从这一点来说： .hover-parent li:hover你不能上去（到ul或div）。

您尝试使用的选择器是＆＃34; next＆＃34;：

A＆gt; B - 这将只选择A的直接B子女

A + B这将选择B紧接着A

在这里您可以找到CSS选择器的W3C文档 http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

演示： http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

请注意，当用户悬停其他内容时，app / page的不同部分会发生变化，这对用户来说真的很困惑。糟糕的用户体验。

Answer 3

您将不得不使用JavaScript来执行此操作。

您发布的选择器#menu-main-menu li.menu-parent-item:hover #overlay正在#overlay内部的某个位置寻找li.menu-parent-item，该元素位于id为#menu-main-menu的祖先元素内。

使用子选择器>将不起作用，因为重叠元素不是您在菜单中悬停的列表元素的子项，而是来自您描述的内容和评论响应。

由于 @Paulie_D 指出了两个目标元素，要悬停的元素和覆盖元素，需要相邻的兄弟姐妹使用兄弟选择器+。根据您所描述的内容和评论回复，他们不是相邻的兄弟姐妹。

我已经为您使用jQuery设置了一个基本示例。只要您悬停.main-menu元素中的任何元素，此示例就会显示叠加层。

<强> HTML

<ul class="main-menu">
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Item One</a></li>
            <li><a href="#">Sub Item Two</a></li>
            <li><a href="#">Sub Item Three</a></li>
            <li><a href="#">Sub Item Four</a></li>
            <li><a href="#">Sub Item Five</a></li>
        </ul>
    </li>
</ul>
<main>
    Content here.
</main>
<footer>
    <div class="overlay">This is my overlay.</div>
</footer>

<强> CSS

body {
    margin: 25px auto;
    width: 500px;
}
ul,
li {
    margin: 0;
    padding: 0;
}
main {
    min-height: 300px;
}
footer,
.overlay {
    height: 50px;
}
footer {
    position: realative;
    background-color: yellow;
}
.main-menu {
    list-style: none;
    height: 50px;
}
.main-menu > li {
    float: left;
    padding: 0 10px;
    position: relative;
}
.main-menu > li:hover .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    list-style: none;
    position: absolute;
    left: 10px;
    width: 150px;
}
.overlay {
    display: none;
    text-align: center;
}

<强>的jQuery

$overlay = $('.overlay');
$('.main-menu > li').hover(
    // when hovered
    function() {
        $overlay.css('display','block');
    },
    // when NOT hovered
    function() {
        $overlay.css('display','none');
    }
);

jsFiddle：http://jsfiddle.net/ednf2pzq/

修改

您可以将jQuery悬停选择器简化为.main-menu。

<强>的jQuery

$('.main-menu > li').hover( // same code as before );

jsFiddle：http://jsfiddle.net/ednf2pzq/1/

根据其他div的悬停触发完全独立的div

3 个答案: