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

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

Change font color on all other divs when hover one div

问题

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

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

Fiddle

  1. .a {
  2.   margin-bottom: 1.5em;
  3. }
  5. .b {
  6.   margin-bottom: 0.5em;
  7.   display: flex;
  8. }
  10. .b:hover {
  11.   background-color: green;
  12. }
  14. .c {
  15.   flex: 1;
  16. }
  1. <div class="a">
  2.   <div class="b">
  3.     <div class="c">
  4.       <p>one</p>
  5.     </div>
  6.     <div class="c">
  7.       <p>two</p>
  8.     </div>
  9.     <div class="c">
  10.       <p>three</p>
  11.     </div>
  12.   </div>
  13.   <div class="b">
  14.     <div class="c">
  15.       <p>four</p>
  16.     </div>
  17.     <div class="c">
  18.       <p>five</p>
  19.     </div>
  20.     <div class="c">
  21.       <p>six</p>
  22.     </div>
  23.   </div>
  24. </div>
  26. <div class="a">
  27.   <div class="b">
  28.     <div class="c">
  29.       <p>un</p>
  30.     </div>
  31.     <div class="c">
  32.       <p>deux</p>
  33.     </div>
  34.     <div class="c">
  35.       <p>trois</p>
  36.     </div>
  37.   </div>
  38.   <div class="b">
  39.     <div class="c">
  40.       <p>quatre</p>
  41.     </div>
  42.     <div class="c">
  43.       <p>cinq</p>
  44.     </div>
  45.     <div class="c">
  46.       <p>six</p>
  47.     </div>
  48.   </div>
  49. </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 -->

  1. .a {
  2.   margin-bottom: 1.5em;
  3. }
  5. .b {
  6.   margin-bottom: 0.5em;
  7.   display: flex;
  8. }
  10. .b:hover {
  11.   background-color: green;
  12. }
  14. .c {
  15.   flex: 1;
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;a&quot;&gt;
  2.   &lt;div class=&quot;b&quot;&gt;
  3.     &lt;div class=&quot;c&quot;&gt;
  4.       &lt;p&gt;one&lt;/p&gt;
  5.     &lt;/div&gt;
  6.     &lt;div class=&quot;c&quot;&gt;
  7.       &lt;p&gt;two&lt;/p&gt;
  8.     &lt;/div&gt;
  9.     &lt;div class=&quot;c&quot;&gt;
  10.       &lt;p&gt;three&lt;/p&gt;
  11.     &lt;/div&gt;
  12.   &lt;/div&gt;
  13.   &lt;div class=&quot;b&quot;&gt;
  14.     &lt;div class=&quot;c&quot;&gt;
  15.       &lt;p&gt;four&lt;/p&gt;
  16.     &lt;/div&gt;
  17.     &lt;div class=&quot;c&quot;&gt;
  18.       &lt;p&gt;five&lt;/p&gt;
  19.     &lt;/div&gt;
  20.     &lt;div class=&quot;c&quot;&gt;
  21.       &lt;p&gt;six&lt;/p&gt;
  22.     &lt;/div&gt;
  23.   &lt;/div&gt;
  24. &lt;/div&gt;
  26. &lt;div class=&quot;a&quot;&gt;
  27.   &lt;div class=&quot;b&quot;&gt;
  28.     &lt;div class=&quot;c&quot;&gt;
  29.       &lt;p&gt;un&lt;/p&gt;
  30.     &lt;/div&gt;
  31.     &lt;div class=&quot;c&quot;&gt;
  32.       &lt;p&gt;deux&lt;/p&gt;
  33.     &lt;/div&gt;
  34.     &lt;div class=&quot;c&quot;&gt;
  35.       &lt;p&gt;trois&lt;/p&gt;
  36.     &lt;/div&gt;
  37.   &lt;/div&gt;
  38.   &lt;div class=&quot;b&quot;&gt;
  39.     &lt;div class=&quot;c&quot;&gt;
  40.       &lt;p&gt;quatre&lt;/p&gt;
  41.     &lt;/div&gt;
  42.     &lt;div class=&quot;c&quot;&gt;
  43.       &lt;p&gt;cinq&lt;/p&gt;
  44.     &lt;/div&gt;
  45.     &lt;div class=&quot;c&quot;&gt;
  46.       &lt;p&gt;six&lt;/p&gt;
  47.     &lt;/div&gt;
  48.   &lt;/div&gt;
  49. &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)，然后您可以按照您的需求继续链式或样式设置。

  1. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  3. &lt;!-- language: lang-css --&gt;
  5. .a {
  6.   margin-bottom: 1.5em;
  7. }
  9. .b {
  10.   margin-bottom: 0.5em;
  11.   display: flex;
  12. }
  14. .b:hover {
  15.   background-color: green;
  16. }
  18. .c {
  19.   flex: 1;
  20. }
  22. .wrapper:hover .b:not(:hover) .c {
  23.   color: red;
  24. }
  26. &lt;!-- language: lang-html --&gt;
  28. &lt;div class=&quot;wrapper&quot;&gt;
  29. &lt;div class=&quot;a&quot;&gt;
  30.   &lt;div class=&quot;b&quot;&gt;
  31.     &lt;div class=&quot;c&quot;&gt;
  32.       &lt;p&gt;one&lt;/p&gt;
  33.     &lt;/div&gt;
  34.     &lt;div class=&quot;c&quot;&gt;
  35.       &lt;p&gt;two&lt;/p&gt;
  36.     &lt;/div&gt;
  37.     &lt;div class=&quot;c&quot;&gt;
  38.       &lt;p&gt;three&lt;/p&gt;
  39.     &lt;/div&gt;
  40.   &lt;/div&gt;
  41.   &lt;div class=&quot;b&quot;&gt;
  42.     &lt;div class=&quot;c&quot;&gt;
  43.       &lt;p&gt;four&lt;/p&gt;
  44.     &lt;/div&gt;
  45.     &lt;div class=&quot;c&quot;&gt;
  46.       &lt;p&gt;five&lt;/p&gt;
  47.     &lt;/div&gt;
  48.     &lt;div class=&quot;c&quot;&gt;
  49.       &lt;p&gt;six&lt;/p&gt;
  50.     &lt;/div&gt;
  51.   &lt;/div&gt;
  52. &lt;/div>;
  54. &lt;div class=&quot;a&quot;&gt;
  55.   &lt;div class=&quot;b&quot;&gt;
  56.     &lt;div class=&quot;c&quot;&gt;
  57.       &lt;p&gt;un&lt;/p&gt;
  58.     &lt;/div&gt;
  59.     &lt;div class=&quot;c&quot;&gt;
  60.       &lt;p&gt;deux&lt;/p&gt;
  61.     &lt;/div&gt;
  62.     &lt;div class=&quot;c&quot;&gt;
  63.       &lt;p&gt;trois&lt;/p&gt;
  64.     &lt;/div&gt;
  65.   &lt;/div&gt;
  66.   &lt;div class=&quot;b&quot;&gt;
  67.     &lt;div class=&quot;c&quot;&gt;
  68.       &lt;p&gt;quatre&lt;/p&gt;
  69.     &lt;/div&gt;
  70.     &lt;div class=&quot;c&quot;&gt;
  71.       &lt;p&gt;cinq&lt;/p&gt;
  72.     &lt;/div&gt;
  73.     &lt;div class=&quot;c&quot;&gt;
  74.       &lt;p&gt;six&lt;/p&gt;
  75.     &lt;/div&gt;
  76.   &lt;/div&gt;
  77. &lt;/div>;
  78. &lt;/div>;
  80. &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 -->

  1. .a {
  2.       margin-bottom: 1.5em;
  3.     }
  5.     .b {
  6.       margin-bottom: 0.5em;
  7.       display: flex;
  8.     }
  10.     .b:hover {
  11.       background-color: green;
  12.     }
  14.     .c {
  15.       flex: 1;
  16.     }
  17.  
  18. .wrapper:hover .b:not(:hover) .c{
  19. color: red;
  20. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;wrapper&quot;&gt;
  2. &lt;div class=&quot;a&quot;&gt;
  3.   &lt;div class=&quot;b&quot;&gt;
  4.     &lt;div class=&quot;c&quot;&gt;
  5.       &lt;p&gt;one&lt;/p&gt;
  6.     &lt;/div&gt;
  7.     &lt;div class=&quot;c&quot;&gt;
  8.       &lt;p&gt;two&lt;/p&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&quot;c&quot;&gt;
  11.       &lt;p&gt;three&lt;/p&gt;
  12.     &lt;/div&gt;
  13.   &lt;/div&gt;
  14.   &lt;div class=&quot;b&quot;&gt;
  15.     &lt;div class=&quot;c&quot;&gt;
  16.       &lt;p&gt;four&lt;/p&gt;
  17.     &lt;/div&gt;
  18.     &lt;div class=&quot;c&quot;&gt;
  19.       &lt;p&gt;five&lt;/p&gt;
  20.     &lt;/div&gt;
  21.     &lt;div class=&quot;c&quot;&gt;
  22.       &lt;p&gt;six&lt;/p&gt;
  23.     &lt;/div&gt;
  24.   &lt;/div&gt;
  25. &lt;/div&gt;
  27. &lt;div class=&quot;a&quot;&gt;
  28.   &lt;div class=&quot;b&quot;&gt;
  29.     &lt;div class=&quot;c&quot;&gt;
  30.       &lt;p&gt;un&lt;/p&gt;
  31.     &lt;/div&gt;
  32.     &lt;div class=&quot;c&quot;&gt;
  33.       &lt;p&gt;deux&lt;/p&gt;
  34.     &lt;/div&gt;
  35.     &lt;div class=&quot;c&quot;&gt;
  36.       &lt;p&gt;trois&lt;/p&gt;
  37.     &lt;/div&gt;
  38.   &lt;/div&gt;
  39.   &lt;div class=&quot;b&quot;&gt;
  40.     &lt;div class=&quot;c&quot;&gt;
  41.       &lt;p&gt;quatre&lt;/p&gt;
  42.     &lt;/div&gt;
  43.     &lt;div class=&quot;c&quot;&gt;
  44.       &lt;p&gt;cinq&lt;/p&gt;
  45.     &lt;/div&gt;
  46.     &lt;div class=&quot;c&quot;&gt;
  47.       &lt;p&gt;six&lt;/p&gt;
  48.     &lt;/div&gt;
  49.   &lt;/div&gt;
  50. &lt;/div&gt;
  51. &lt;/div&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定