英文:
Change font color on all other divs when hover one div
问题
要在悬停时突出显示一个div,通过改变所有其他div(/行)的字体颜色来实现。
在这个示例中,我希望在悬停在特定的“b”时,所有其他具有类名“b”的div都更改字体颜色。
.a {
margin-bottom: 1.5em;
}
.b {
margin-bottom: 0.5em;
display: flex;
}
.b:hover {
background-color: green;
}
.c {
flex: 1;
}
<div class="a">
<div class="b">
<div class="c">
<p>one</p>
</div>
<div class="c">
<p>two</p>
</div>
<div class="c">
<p>three</p>
</div>
</div>
<div class="b">
<div class="c">
<p>four</p>
</div>
<div class="c">
<p>five</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>
<div class="a">
<div class="b">
<div class="c">
<p>un</p>
</div>
<div class="c">
<p>deux</p>
</div>
<div class="c">
<p>trois</p>
</div>
</div>
<div class="b">
<div class="c">
<p>quatre</p>
</div>
<div class="c">
<p>cinq</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>
英文:
I want to highlight one div on hover through changing the font color on all other divs (/rows).
In this example I would want all other divs with class name "b" to change font color when hovering a specific "b".
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.a {
margin-bottom: 1.5em;
}
.b {
margin-bottom: 0.5em;
display: flex;
}
.b:hover {
background-color: green;
}
.c {
flex: 1;
}
<!-- language: lang-html -->
<div class="a">
<div class="b">
<div class="c">
<p>one</p>
</div>
<div class="c">
<p>two</p>
</div>
<div class="c">
<p>three</p>
</div>
</div>
<div class="b">
<div class="c">
<p>four</p>
</div>
<div class="c">
<p>five</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>
<div class="a">
<div class="b">
<div class="c">
<p>un</p>
</div>
<div class="c">
<p>deux</p>
</div>
<div class="c">
<p>trois</p>
</div>
</div>
<div class="b">
<div class="c">
<p>quatre</p>
</div>
<div class="c">
<p>cinq</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
以下是您要翻译的内容:
First you need a shared parent, on your example, .a
being the topmost parent is repeated so add one <div>
that wraps everything (or use one that is already there).
首先,您需要一个共享的父元素,在您的示例中,.a
作为最顶层的父元素重复出现,所以添加一个包裹所有内容的 <div>
(或使用已经存在的)。
Then you need to add a :hover
on the wrapper then add a conditional :not(:hover)
to the .b
and then you can continue the chain or style as you want.
然后,您需要在包裹元素上添加 :hover
,然后在 .b
上添加条件 :not(:hover)
,然后您可以按照您的需求继续链式或样式设置。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.a {
margin-bottom: 1.5em;
}
.b {
margin-bottom: 0.5em;
display: flex;
}
.b:hover {
background-color: green;
}
.c {
flex: 1;
}
.wrapper:hover .b:not(:hover) .c {
color: red;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="a">
<div class="b">
<div class="c">
<p>one</p>
</div>
<div class="c">
<p>two</p>
</div>
<div class="c">
<p>three</p>
</div>
</div>
<div class="b">
<div class="c">
<p>four</p>
</div>
<div class="c">
<p>five</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>;
<div class="a">
<div class="b">
<div class="c">
<p>un</p>
</div>
<div class="c">
<p>deux</p>
</div>
<div class="c">
<p>trois</p>
</div>
</div>
<div class="b">
<div class="c">
<p>quatre</p>
</div>
<div class="c">
<p>cinq</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>;
</div>;
<!-- end snippet -->
英文:
First you need a shared parent, on your example, .a
being the topmost parent is repeated so add one <div>
that wraps everything (or use one that is already there).
Then you need to add a :hover
on the wrapper then add a conditional :not(:hover)
to the .b
and then you can continue the chain or style as you want.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.a {
margin-bottom: 1.5em;
}
.b {
margin-bottom: 0.5em;
display: flex;
}
.b:hover {
background-color: green;
}
.c {
flex: 1;
}
.wrapper:hover .b:not(:hover) .c{
color: red;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="a">
<div class="b">
<div class="c">
<p>one</p>
</div>
<div class="c">
<p>two</p>
</div>
<div class="c">
<p>three</p>
</div>
</div>
<div class="b">
<div class="c">
<p>four</p>
</div>
<div class="c">
<p>five</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>
<div class="a">
<div class="b">
<div class="c">
<p>un</p>
</div>
<div class="c">
<p>deux</p>
</div>
<div class="c">
<p>trois</p>
</div>
</div>
<div class="b">
<div class="c">
<p>quatre</p>
</div>
<div class="c">
<p>cinq</p>
</div>
<div class="c">
<p>six</p>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论