显示其他类悬停的数据属性类

Question

我使用了this SO post.

中的以下工具提示提示

JSFiddle here

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