显示来自其他 class 悬停的数据属性 class

Question

我正在使用来自 this SO post.

的以下工具提示提示

.content {
  display: flex;
  flex-direction: column;
}

.area1 {
  background-color: red;
  height: 20px;
  width: 20px;
}

.area2 {
  background-color: orange;
  height: 20px;
  width: 20px;
}

.area3 {
  background-color: violet;
  height: 20px;
  width: 20px;
}

[tooltip]:before {
  position: absolute;
  content: attr(tooltip);
  opacity: 0;
}

[tooltip]:hover:before {
  opacity: 1;
}

<div class='content'>
  <div class='area1' tooltip='this is area 1'>
  </div>
  <div class='area2' tooltip='this is area 2'>
  </div>
  <div class='area3' tooltip='this is area 3'>
  </div>
</div>

我只需要在悬停该区域时显示工具提示，而不是悬停工具提示时（如图所示）。

我试过：

.area1:hover [tooltip] {
    opacity: 1;
}

和

.area1:hover [tooltip]:before {
    opacity: 1;
}

两种情况我都没有成功。

Answer 1

在 [tooltip]::before 上使用 pointer-events: none。它确实像它看起来的那样：

.content {
  display: flex;
  flex-direction: column;
}

.area {
  width: 20px;
  height: 20px;
}

#area1 { background-color: red; }
#area2 { background-color: orange; }
#area3 { background-color: violet; }

[tooltip]::before {
  position: absolute;
  content: attr(tooltip);
  opacity: 0;
  pointer-events: none;
}

[tooltip]:hover::before {
  opacity: 1;
}

<div class="content">
  <div id="area1" class="area" tooltip="this is area 1"></div>
  <div id="area2" class="area" tooltip="this is area 2"></div>
  <div id="area3" class="area" tooltip="this is area 3"></div>
</div>

显示来自其他 class 悬停的数据属性 class

Show data-attribute class from other class hovering

html

css

custom-data-attribute