使重叠的非悬停元素变暗

Question

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

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

换句话说：

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

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

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

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

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

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

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

Answer 1

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

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

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

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

.nohover {
  pointer-events: none;
}

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

Answer 2

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

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

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

<svg width="250" height="250">

  <rect x="0" y="0" width="150" height="150" 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" width="60" height="30" fill="blue"/>
    </g>
  
  </g>
</svg>

Answer 3

试试这样：

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

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

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

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