使重叠的非悬停元素变暗

Posted 2023-03-06

【中文标题】使重叠的非悬停元素变暗

【英文标题】：Dim non-hover elements that overlap

【发布时间】：2021-04-20 08:41:18

【问题描述】：

从example 开始，我正在尝试使 html 页面的非悬停元素变暗（即降低不透明度）。

以下代码仅适用于非重叠元素。但是，如果页面包含在背景中重叠的元素，并且我不希望在悬停时对其产生任何影响（例如下面的绿色正方形），那么感兴趣的“可悬停”元素（例如下面的红色圆圈和蓝色矩形）是当它们不悬停时变暗，但当光标仍在背景形状上时。

换句话说：

。绿色方块：不可“悬停”（悬停时不应有任何影响）

。红圈：“可悬停”（即在悬停时使所有其他元素变暗，即蓝色矩形和绿色正方形）

。蓝色矩形：“可悬停”（即在悬停时使所有其他元素变暗，即红色圆圈和绿色正方形）

当悬停在绿色方块上时，如何跳过调暗所有元素？

.parent:hover .child 
  opacity: 0.2;
  transition: all .3s;


.parent .child:hover 
  opacity: 1;
  transition: all .3s;

<svg  >
  <g class="parent">
    <rect x="0" y="0"   fill="green"/>
      
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80"   fill="blue"/>
    </g>
  
  </g>
</svg>

【参考方案1】：

你唯一的希望（我认为）是使用指针事件：无。

但这会避免任何指针与元素的交互

.parent:hover .child 
  opacity: 0.2;
  transition: all .3s;


.parent .child:hover 
  opacity: 1;
  transition: all .3s;


.nohover 
  pointer-events: none;

<svg  >
  <g class="parent">
    <rect class="nohover" x="0" y="0"   fill="green"/>
      
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80"   fill="blue"/>
    </g>
  
  </g>
</svg>

【讨论】：

谢谢 vals。这也解决了问题。

【参考方案2】：

最简单的选择是将填充的矩形移到 .parent 之外，此时现有 CSS 将按预期工作，因为 .parents 不透明度不会应用于绿色背景。

.parent:hover .child 
  opacity: 0.2;
  transition: all .3s;


.parent .child:hover 
  opacity: 1;
  transition: all .3s;

<svg  >

  <rect x="0" y="0"   fill="green"/>
  
  <g class="parent">
    
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80"   fill="blue"/>
    </g>
  
  </g>
</svg>

【讨论】：

感谢星展银行。您的解决方案似乎是最简单的。

【参考方案3】：

试试这样：

.parent:hover .child 
  opacity: 0.2;
  transition: all .3s;


.parent:hover rect:hover ~.child,
.parent .child:hover 
  opacity: 1;
  transition: all .3s;

<svg  >
  <g class="parent">
    <rect x="0" y="0"   fill="green"/>
      
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80"   fill="blue"/>
    </g>
  
  </g>
</svg>

由于rect 元素位于.child 元素之前，因此除了.parent:hover 之外，还可以检查其:hover，然后相应地设置.child 元素的样式。

【讨论】：

大神解答！我没有看到这种可能性

感谢 sdgib。您的解决方案效果很好！

不客气！你永远不知道它可能对谁有帮助:)