Question

当我在第二个孩子上盘旋时，我试图改变第一个孩子。你怎么用html和css做这个呢？

（使用波浪号/〜我似乎能够在html代码中向下选择childeren，但不能向上。我是否必须使用不同的选择器向上？）

grtz

<div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
</div>

<style>
   #box1 {
      height: 100px;
      width: 100px;
      background-color: red;
   }

   #box2 {
      height: 100px;
      width: 100px;
      background-color: lime;
   }

   #box2:hover ~ #box1 {
      height: 300px;
      width: 300px;
      background-color: yellow;
   }

</style>

Answer 1

普通兄弟选择器，这是代字号所表达的，只会选择跟随（不在其前）匹配元素。

由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素先于（不一定是立即）由第二个序列表示的元素。

参考：http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

在您的情况下，可能只有CSS存档这个机会。其实两个......

机会1

在父母:hover上，更改孩子。

#container:hover div:first-child { background-color: #cff; }

在您的情况下，这需要#container为display: inline-block;，否则当将空白区域悬停在两个框中时，红色框也会发生变化。

宾：http://jsbin.com/dilitucije/1

适用于所有现代浏览器和大多数旧版浏览器。

机会2

我使用定义顺序的flexbox来反转两个项目的渲染。由于元素的渲染顺序是相反的，但DOM顺序不是，这可以工作。

CSS：

.reversed { display: flex; flex-direction: column-reverse; /* reverse rendering */ } #container div:hover:first-child ~ div { background-color: #cff; }

Flexbox规则的说明：

使用Flexbox（great explanation，W3C spec）

按行排序项目（容器是＆＃34; column＆＃34;），颠倒.reversed容器中项目的顺序（第一个DOM节点最后呈现，最后呈现DOM节点）

将课程添加到#container

<div id="container" class="reversed">...</div>

宾：http://jsbin.com/piyokulehe/1

在FF 34中工作，Chrome 39，至少也应该在IE 11中运行（可能不是IE10）。

更新

修正了错误row-reverse（该示例使用column-reverse，符合您的要求）

删除了不必要的justify-content（因为项目已呈现为行，这不是必需的）

向Flexbox解决方案添加了解释

Answer 2

要在悬停时实现此功能，您的元素必须是元素的子元素，或者位于悬停的元素之后。

需要更改其样式的元素必须是悬停元素的后代或旁边的元素才能工作

Css nth-child：hover~first-child {...}

2 个答案:

机会1

机会2

更新