css - 从子div到下一个相邻div的css选择器？

Question

如果我有这样的标记：

<div>
    <div class="one"></div>
</div>
<div class="two">

在 css 中有什么方法可以从 class .one 中选择 class .two 吗？

就像在这个小提琴中一样。

Answer 1

您正在尝试仅使用 CSS 是不可能的，您可以做的是您可以像这样重新排列元素

<div>
    <div class="one"></div>
    <div class="two">
</div>

并使用

.one:hover + .two {
   /* Styles */
}

其他你可以做的是这个（如果你不想改变标记）演示

div {
    width: 50px;
    height: 50px;
    background: pink;
}

.two {
    height: 20px;
    background: #000;
    width: 20px;
}

div:nth-of-type(1):hover + .two {
    background: #f00;
}

.one + .two {
    background: #f00;
}

Answer 2

你可以使用 jquery

脚本类型="文本/javascript">

    $(function () {



        $(".one").mouseover(function () {
            $(".two").css("background","red")

        });



        $(".one").mouseout(function () {

            $(".two").css("background", "");
        });
    });

</script>