悬停一个元素时如何影响其他元素

我想做的是将某个div悬停时，它将影响另一个div的属性。

例如，在此JSFiddle演示中，当您将鼠标悬停在#cube它会更改background-color但是我想要的是，当我将鼠标悬停在#container ， #cube会受到影响。

div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; }

<div id="container"> <div id="cube"> </div> </div>

#1楼

非常感谢Mike和Robertc的有用帖子！

如果您的HTML中有两个元素，并且您想要:hover在一个元素上，并在另一个元素中定位样式更改，则这两个元素必须直接相关-父母，子女或兄弟姐妹。这意味着这两个元素要么必须在另一个元素之内，要么必须都包含在同一较大的元素之内。

我想在用户浏览我的网站并将:hover在突出显示的术语上时在浏览器右侧的框中显示定义。因此，我不希望将'definition'元素显示在'text'元素内。

我几乎放弃了，只是将javascript添加到了我的页面，但这就是未来！我们不必忍受CSS和HTML带来的麻烦，告诉我们在何处放置元素才能实现所需的效果！最后，我们妥协了。

尽管文件中的实际HTML元素必须嵌套或包含在单个元素中才有效:hover彼此:hover目标，但css position属性可用于在任何需要的position显示任何元素。 我使用position：fixed将:hover动作的目标放置在用户希望在用户屏幕上的位置，而不管其在HTML文档中的位置如何。

的HTML：

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

CSS：

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

在该示例中的目标:hover命令从内的元素#explainBox必须是#explainBox或也内#explainBox 。分配给#definitions的位置属性会强制其显示在所需位置（在#explainBox外部），即使它在技术上位于HTML文档中不需要的位置。

我知道，对多个HTML元素使用相同的#id被认为是不好的形式；但是，在这种情况下，由于#light实例在唯一的#id元素中的位置， #light可以独立描述。在这种情况下，是否有任何理由不重复id #light ？

#2楼

在将同一个元素悬停在给定元素上时，使用同级选择器是设计其他元素样式的一般解决方案，但是 仅当DOM中其他元素遵循给定元素时，该方法才有效 。当其他元素实际上应该在悬停的元素之前时，我们该怎么办？假设我们要实现一个信号条评级小部件，如下所示：

实际上，使用CSS flexbox模型可以很容易地做到这一点，只需将flex-direction设置为reverse ，以便元素以与DOM中相反的顺序显示。上面的屏幕截图来自使用纯CSS实现的此类小部件。

95％的现代浏览器都很好地支持Flexbox 。

.rating { display: flex; flex-direction: row-reverse; width: 9rem; } .rating div { flex: 1; align-self: flex-end; background-color: black; border: 0.1rem solid white; } .rating div:hover { background-color: lightblue; } .rating div[data-rating="1"] { height: 5rem; } .rating div[data-rating="2"] { height: 4rem; } .rating div[data-rating="3"] { height: 3rem; } .rating div[data-rating="4"] { height: 2rem; } .rating div[data-rating="5"] { height: 1rem; } .rating div:hover ~ div { background-color: lightblue; }

<div class="rating"> <div data-rating="1"></div> <div data-rating="2"></div> <div data-rating="3"></div> <div data-rating="4"></div> <div data-rating="5"></div> </div>

#3楼

只有这对我有用：

#container:hover .cube { background-color: yellow; }

凡.cube是的的CssClass #cube 。

在Firefox ， Chrome和Edge中进行了测试。

#4楼

在此特定示例中，您可以使用：

#container:hover #cube {
    background-color: yellow;   
}

此示例仅适用于cube是container的子级的情况。对于更复杂的场景，您需要使用其他CSS或JavaScript。

#5楼

如果多维数据集直接位于容器内部：

#container:hover > #cube { background-color: yellow; }

如果多维数据集位于容器旁边（在容器关闭标签之后）：

#container:hover + #cube { background-color: yellow; }

如果多维数据集在容器内的某处：

#container:hover #cube { background-color: yellow; }

如果多维数据集是容器的同级：

#container:hover ~ #cube { background-color: yellow; }

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3163924

标签

firefox

Chrome

flexbox