Question

我有两个要素：

<div id="next_prayer">...</div>
<div class="prayers_lower">...</div>

我正在尝试在#next_prayer悬停时更改prayers_lower的高度。

这是我的CSS：

.prayers_lower {
  min-height: 10%;
  height: 10%;
}
.prayers_lower:hover {
  height: 30%;
}
.prayers_lower:hover + #next_prayer {
  height: 60%;
}
.prayers_lower:hover ~ #next_prayer {
  height: 60%;
}
.prayers_lower:hover ~ #next_prayer {
  height: 30%;
}

.prayers_lower:hover ~ #next_prayer {
  height: 30%;
}

没有任何效果 - 我没有看到任何样式应用于~个选定元素。

我该如何做到这一点？

Answer 1

相邻的兄弟选择器+和一般同级选择器~只能在第一个引用的元素之后选择元素。在HTML中，您尝试选择在引用元素之前出现的元素。

CSS规范中没有“上一个”兄弟选择器。在这种情况下，您需要使用javascript，或者找到另一个用于引用#next_prayer div的元素。

使用jQuery，您可以实现此功能：

$('div.prayers_lower').hover(
    function() {
        $(this).prev().animate({ height: "30%" });
}, function() {
        $(this).prev().animate({ height: "auto" });
});

Answer 2

在纯CSS中实现此效果的最佳方法是将它们包装到容器中

<div class="wrapper">
    <div id="next_prayer">...</div>
    <div class="prayers_lower">...</div>
</div>

因为在悬停孩子的时候你也会徘徊包装，那么你只需要覆盖

.wrapper:hover #next_prayer
{
    /*Effects on #nextprayer when .prayers_lower is hovered*/
}
.wrapper:hover #next_prayer:hover
{
    /*Effects on #next_prayer when it is hovered, you must overwrite every style
    from above rule that should'nt be visible when #next_prayer is hovered*/
}
.wrapper:hover .prayers_lower
{
    /*Effects on .prayers_lower when #newt_prayer is hovered*/
}
.wrapper:hover .prayers_lower:hover
{
    /*Effects on .prayers_lower when it is hovered, and you must by the way
    overvwrite unwanted styling from above rule*/
}

预览：JSBin

CSS - 选择以前的兄弟姐妹

2 个答案: