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


459

我想做的是 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>

Answers:


983

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

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

如果多维数据集位于容器旁边(在容器关闭标签之后):

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

如果多维数据集在容器内的某个位置:

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

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

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

106
不要忘记通用的同级组合~器:“多维数据集在DOM中位于容器之后的某个位置并共享一个父级”
robertc 2010年

3
太酷了。有什么资料可以在其中找到更多信息吗?所有浏览器都支持CSS3吗?希望获得更多有关此的信息。非常感谢!
匿名

2
+1好答案@Mike。如果#container紧挨着#cube(即#container跟随)#cube怎么办?
2014年

4
如果悬停的元素在容器内(我们要实现)该怎么办?例如:#cube:hover #container {Some CSS Effects}
Hanzallah Afgan 2015年

2
好答案 !!如果我要在孩子悬停时更改父母该怎么办?我认为没有选择器。
Mikel

41

在此特定示例中,您可以使用:

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

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


35

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

信号条评级小部件

实际上,通过将CSS弹性框模型设置flex-directionreverse,可以很容易地做到这一点,从而使元素以与DOM中的元素相反的顺序显示。上面的屏幕截图来自使用纯CSS实现的此类小部件。

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


是否可以对其进行编辑,以便在将鼠标从1条移动到另一条时突出显示不会消失?闪烁有点让人分心。
Cerbrus's

@Cerbrus:添加了一种解决方案,当鼠标位于小节之间时,该解决方案不会隐藏悬停。缺点是条的宽度不再相等。
Dan Dascalescu 2015年

1
在第一个代码段中尝试以下操作:在上.rating div,删除边距,然后添加border-right: 4px solid white;
Cerbrus

1
伸缩方向(IE不太支持)或1)默认为黑色2)鼠标悬停在容器上时全部为蓝色3)黑色,用于栏上悬停时的下一个兄弟:)
Stephane Mathis

我做了这个小提琴(至少对我来说),这使这里变得更加陌生。jsfiddle.net/maxshuty/cj55y33p/3
maxshuty

8

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

如果您的HTML中包含两个元素,并且您想:hover在另一个元素上进行样式更改,然后针对另一种样式更改作为目标,则这两个元素必须直接相关-父母,子女或兄弟姐妹。这意味着这两个元素要么必须在另一个元素之内,要么必须都包含在同一较大的元素之内。

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

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

虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能彼此有效:hover,但css 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文档中不需要的位置。

我了解将相同的样式#id用于多个HTML元素被视为不良形式;然而,在这种情况下,#light由于它们在唯一的#id“ d”元素中的相应位置,因此可以独立描述它们的实例。有什么理由id #light在这种情况下不重复吗?


对于这么短的时间,答案很长,但这是它的jsfiddle jsfiddle.net/ubershmekel/bWgq6/1
ubershmekel 2014年

1
当您ID多次使用相同的浏览器时,某些浏览器会发疯。只需使用即可class
Serj Sagan

6

只有这对我有用:

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

.cube的CssClass 在哪里#cube

FirefoxChromeEdge中进行了测试。


4

这是另一个想法,您可以在不考虑任何特定选择器的情况下,仅通过使用:hover主元素的状态来影响其他元素。

为此,我将依靠自定义属性(CSS变量)的使用。正如我们在规范中所读到的:

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

这个想法是在主元素内定义自定义属性,并使用它们来设置子元素的样式,由于这些属性是继承的,因此我们只需要在悬停时在主元素内更改它们即可。

这是一个例子:

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

为什么这会比结合使用特定选择器和悬停更好?

我可以提供至少2个使这种方法值得考虑的原因:

  1. 如果我们有许多嵌套的元素共享相同的样式,这将避免我们使用复杂的选择器将所有这些元素作为目标。使用自定义属性,我们只需将鼠标悬停在父元素上即可更改该值。
  2. 定制属性可用于替换任何属性的值以及它的部分值。例如,我们可以定义颜色的自定义属性,我们使用它内的borderlinear-gradientbackground-colorbox-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>

如上所示,我们只需一个CSS声明即可更改不同元素的许多属性。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.