html - 将剩余宽度除以两个 div 并在相对推送时隐藏一个 div

Question

(不是重复的，我已经阅读了其他答案)。

HTML

<div id="ultra_div">
    <div id="other_div">HOVER ME</div>
    <div id="btw_which_ones_pink">It is okay for the pink div to be pushed, it's actually as planned</div>
    <div id="to_divide">
        <div id="part_one">this will, inevitably, vary</div>
        <div id="part_two">this width won't vary</div>
</div>
</div>

CSS

#ultra_div{
    width: 300px;
}

#btw_which_ones_pink{
    background-color: pink;
    width: 100px;
    height: 100px;
    position:relative;
    float: left;
}
#other_div:hover{
    width: 320px;
    -moz-transition: width 0.5s ease-out; 
    -webkit-transition:width 0.5s ease-out;
    -o-transition:width 0.5s ease-out;
    transition:width 0.5s ease-out;
}

#other_div{
    color: white;
    width: 100px;
    height: 100px;
     background-color: black;
    position:relative;
    float: left;
}

#to_divide{
    width: 100%;
    display:-moz-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:box;
    height: 150px;
    position:relative;
    background-color:blue;
    z-index: 9;
}

#part_two{
    background-color: yellow;
    right: 0;
    position:absolute;
    width: 100px;
    height: 93%;
    margin: 4px;
}
#part_one{
    background-color:white;
    width:72%;
    margin: 4px;
    height: 93%;
}

你好，我想要的东西在这里和这个 fiddle 中都有描述! :)

1-> 粉色div被压入还好，其实是计划好的

2-> ...但是我不想让蓝色的div被压下。我希望粉色 div 隐藏在蓝色 div 后面，同时它(蓝色 div)保持相同的“顶部”属性。

所有 div 的位置应该是“相对的”，因为黑色和粉色 div 的高度可能不同，而蓝色 div 的高度取决于它们。因此，对于“相对”，我可以确保将蓝色 div 插入方形 div 的正下方，因为它的宽度为 100%；

我之前已经完成了所有这一切，但是当我尝试实现我的主要目标时，一切都不合适，所以我删除了代码并再次尝试。

3-> 我希望蓝色 div 在宽度上被两个 div 分开，黄色的 part_two 和白色的 part_one。第二部分(黄色)是固定的。它的宽度不会变化。问题是蓝色 div 的宽度可能会有所不同。这意味着我要实现的白色div的宽度实际上是蓝色div的宽度-黄色div的宽度。不幸的是，直到现在这一直是臀部的真正疼痛所以我想我会尝试在这里找到一些帮助。 纯 CSS

请仅在完成 ​​1,2 和 3 后才提交答案。

Answer 1

使用这个 css 规则:

#other_div:hover+#btw_which_ones_pink~#to_divide{
  //your code
}

选择“to_divide”div。

然后，应用您需要的东西。

display: box不存在，右边是flex

您需要在 hover 状态下更改一些位置和显示(这些规则需要页面的其余部分才能生效，所以我不会浪费时间尝试满足您的要求)，但是，为什么不简单地使 btw_which_ones_pink 显示:无？

    #other_div:hover+#btw_which_ones_pink{
  display: none;
}