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

我想做的是,当某个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>

764967 次浏览

在这个例子中,你可以使用:

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

这个例子只适用于cubecontainer的子。对于更复杂的场景,需要使用不同的CSS或JavaScript。

如果立方体直接在容器内:

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

如果立方体在容器关闭标签后面,则容器:

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

如果立方体在容器内的某个地方:

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

如果立方体是容器的兄弟:

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

非常感谢Mike和Robertc的帮助帖子!

如果你的HTML中有两个元素,你想要:hover覆盖其中一个,并在另一个中改变样式,这两个元素必须直接相关——父元素、子元素或兄弟元素。这意味着这两个元素要么必须是一个在另一个里面,要么必须都包含在同一个更大的元素中。

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

我几乎放弃了,只是添加javascript到我的页面,但这是未来dang它!我们不应该忍受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;
}

在本例中,来自#explainBox中的元素的:hover命令的目标必须是#explainBox#explainBox。分配给#definitions的位置属性强制它出现在所需的位置(在#explainBox之外),即使它在技术上位于HTML文档中不需要的位置。

我理解使用相同的#id用于多个HTML元素被认为是糟糕的形式;然而,在这种情况下,#light的实例可以独立描述,因为它们各自位于唯一的# eyz0d元素中。在这种情况下,有什么理由不重复id #light吗?

当鼠标悬停在一个特定的元素上时,使用兄弟选择器是样式化其他元素的一般解决方案,它工作于只有当其他元素跟随DOM中给定的元素时。当其他元素实际上应该在悬停元素之前时,我们该怎么办?假设我们想实现一个信号条评级小部件,如下所示:

Signal bar rating widget .

这实际上可以使用CSS flexbox模型轻松完成,只需将flex-direction设置为reverse,这样元素就会以与它们在DOM中的顺序相反的顺序显示。上面的截图就是这样一个小部件,用纯CSS实现的。

Flexbox得到了很好的支持被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>

只有这个对我有用:

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

其中.cube是CssClass在#container中的某处。

火狐边缘测试。

下面是另一种想法,允许您在不考虑任何特定的选择器的情况下,仅使用主元素的:hover状态来影响其他元素。

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

自定义属性是普通的属性,所以它们可以在 任何元素,都被解析为正常的继承级联 规则< / >强……

这个想法是在主元素中定义自定义属性,并使用它们来设置子元素的样式,因为这些属性是继承的,我们只需要在hover的主元素中更改它们。

这里有一个例子:

#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. 如果我们有许多嵌套的元素共享相同的样式,这将避免我们复杂的选择器在悬停时将它们全部定位。使用Custom属性,我们只需在悬停在父元素上时更改值。
  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声明来改变不同元素的许多属性。

#imageDiv:hover  #detailDiv
{
z-index: -999 !important;
}

在这里

#imageDiv是第一个要悬停的div

#detailDiv是css在悬停时应用的第二个div

所以如果我悬停在第一个div然后zindex将分配给第二个div

对我有用

警告:如果你能使用CSS:使用CSS没有Javascript!

如果你想选择未知元素 /或无法到达的位置,你可以使用JavaScript。

const cube = document.getElementById('cube')
const container = document.getElementById('container')


cube.addEventListener('mouseover', () => container.style.backgroundColor = "blue")
cube.addEventListener('mouseleave', () => container.style.backgroundColor = "white")
div {
outline: 1px solid red;
width: 200px;
height: 30px;
}


#cube {
background-color: red;
}
<main>
<div id="container">
</div>
</main>
<div id="cube">
</div>