div悬停时如何影响其他元素-Java 学习之路

333

我认为这是一个非常基本的问题，但我不确定如何做到这一点 .

我想要做的是当某个 div 被徘徊时，它会影响另一个 div 的属性 .

例如，在this simple example中，当您将鼠标悬停在 #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>

6 回答

22
只有这对我有用：
```
#container:hover .cube { background-color: yellow; }
```
.cube 是 #cube 的CssClass .

在 Firefox ， Chrome 和 Edge 中测试过 .
回复于 2024-05-03T11:08:08+08:00
35
这是另一个想法，允许您在不考虑任何特定选择器的情况下影响其他元素，并且仅使用主元素的 :hover 状态 .

为此，我将依赖于自定义属性（CSS变量）的使用 . 我们可以在specification中阅读：

自定义属性是普通属性，因此可以在任何元素上声明它们，使用正常继承和级联规则解析...

我们的想法是在main元素中定义自定义属性并使用它们来设置子元素的样式，并且由于这些属性是继承的，我们只需要在悬停时在main元素中更改它们 .

这是一个例子：
```
#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}
```
```
<div id="container">
  <div>
  </div>
</div>
```
Why this can be better than using specific selector combined with hover?

我可以提供至少2个使这种方法成为好的方法的原因：
- 如果我们有许多共享相同样式的嵌套元素，这将避免我们复杂的选择器在悬停时定位所有这些元素 . 使用自定义属性，我们只需在悬停在父元素上时更改值 .
- 自定义属性可用于替换任何属性的值以及它的部分值 . 例如，我们可以为颜色定义一个自定义属性，我们在 border ， linear-gradient ， background-color ， box-shadow 等中使用它 . 这将避免我们在悬停时重置所有这些属性 .
这是一个更复杂的例子：
```
.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}
```
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
```
如上所述，我们只需要 one CSS declaration 就可以更改不同元素的许多属性 .
回复于 2024-05-03T11:08:08+08:00
6
在此特定示例中，您可以使用：
```
#container:hover #cube {
    background-color: yellow;   
}
```
这只能起作用，因为 cube 是 container 的子节点 . 对于更复杂的场景，您需要使用javascript .
回复于 2024-05-03T11:08:08+08:00

使用兄弟选择器是将鼠标悬停在给定元素上时为其他元素设置样式的通用解决方案，只有当其他元素遵循DOM中的给定元素时，它才有效 . 当其他元素实际上应该在徘徊之前时，我们能做什么？假设我们想要实现信号栏评级小部件，如下所示：

Signal bar rating widget

实际上可以使用CSS flexbox模型轻松完成，方法是将flex-direction设置为 reverse ，这样元素的显示顺序与它们在DOM中的顺序相反 . 上面的屏幕截图来自这样一个小部件，用纯CSS实现 .

_956457_由95％的现代浏览器提供 .

.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>

回复于 2024-05-03T11:08:08+08:00

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

如果您的HTML中有两个元素，并且您希望 :hover 超过一个并且在另一个元素中定位样式更改，那么这两个元素必须直接相关 - 父母，孩子或兄弟姐妹 . 这意味着这两个元素必须是一个在另一个内部，或者必须都包含在同一个更大的元素中 .

我想在浏览器右侧的框中显示定义，因为我的用户通过我的网站阅读，而 :hover 则是突出显示的术语;因此，我不希望'definition'元素显示在'text'元素内 .

我几乎放弃了，只是添加了javascript到我的页面，但这是未来的dang吧！我们不应该忍受来自CSS和HTML的背景，告诉我们在哪里放置元素以实现我们想要的效果！最后我们妥协了 .

While the actual HTML elements in the file must be either nested or contained in a single element to be valid :hover targets to each other, the css position attribute can be used to display any element where ever you want. I used position:fixed to place the target of my :hover action where I wanted it on the user's screen regardless to its location in the HTML document.

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:
      
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;
}
```
在此示例中， #explainBox 中元素的 :hover 命令的目标必须是 #explainBox 或 #explainBox . 分配给#definitions的位置属性强制它出现在所需位置（ #explainBox 之外），即使它在技术上位于HTML文档中不需要的位置 .

我理解，对于多个HTML元素使用相同的 #id 被认为是不好的形式;但是，在这种情况下， #light 的实例可以独立描述，因为它们各自在 #id 'd元素中的位置 . 在这种情况下，有没有理由不重复 id #light ？
回复于 2024-05-03T11:08:08+08:00
0
如果立方体直接位于容器内：
```
#container:hover > #cube { background-color: yellow; }
```
如果cube位于（容器关闭标记之后）容器旁边：
```
#container:hover + #cube { background-color: yellow; }
```
如果多维数据集位于容器内的某个位置：
```
#container:hover #cube { background-color: yellow; }
```
如果多维数据集是容器的兄弟：
```
#container:hover ~ #cube { background-color: yellow; }
```
回复于 2024-05-03T11:08:08+08:00

div悬停时如何影响其他元素

6 回答

相关问题