当悬停在一个div上时,更改所有其他div的字体颜色。

huangapple go评论54阅读模式
英文:

Change font color on all other divs when hover one div

问题

要在悬停时突出显示一个div,通过改变所有其他div(/行)的字体颜色来实现。

在这个示例中,我希望在悬停在特定的“b”时,所有其他具有类名“b”的div都更改字体颜色。

Fiddle

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

Fiddle

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

&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;one&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;two&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;three&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;four&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;five&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;six&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;un&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;deux&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;trois&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;quatre&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;cinq&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;six&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

以下是您要翻译的内容:

First you need a shared parent, on your example, .a being the topmost parent is repeated so add one &lt;div&gt; that wraps everything (or use one that is already there).
首先,您需要一个共享的父元素,在您的示例中,.a 作为最顶层的父元素重复出现,所以添加一个包裹所有内容的 &lt;div&gt;(或使用已经存在的)。

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),然后您可以按照您的需求继续链式或样式设置。

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

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

&lt;!-- language: lang-html --&gt;

&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;one&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;two&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;three&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;four&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;five&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;six&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div>;

&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;un&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;deux&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;trois&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;quatre&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;cinq&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;six&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div>;
&lt;/div>;

&lt;!-- end snippet --&gt;
英文:

First you need a shared parent, on your example, .a being the topmost parent is repeated so add one &lt;div&gt; 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 -->

&lt;div class=&quot;wrapper&quot;&gt;
&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;one&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;two&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;three&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;four&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;five&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;six&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;a&quot;&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;un&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;deux&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;trois&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;b&quot;&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;quatre&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;cinq&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;c&quot;&gt;
      &lt;p&gt;six&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 06:43:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/75496840.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定