html - 重叠的非悬停元素变暗

Question

从此example ，我正在尝试调暗(即降低不透明度)html 页面的非悬停元素。

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

换句话说:

。绿色方 block :不可“悬停”(悬停时不应有任何效果)

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

。蓝色矩形:“可悬停”(即悬停时使所有其他元素变暗，即红色圆圈和绿色方 block )

当鼠标悬停在绿色方 block 上时，如何跳过使所有元素变暗？

.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

你唯一的希望(我认为)是使用pointer-events: none。

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

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