显示来自其他类悬停的数据属性类答案

【问题标题】：Show data-attribute class from other class hovering显示来自其他类悬停的数据属性类
【发布时间】：2017-11-18 00:53:38
【问题描述】：

我正在使用来自 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;
}

这两种情况我都没有成功。

【问题讨论】：

你的实现类似于这个 - 看看你能不能找出区别w3schools.com/css/css_tooltip.asp
为什么，@acoder？就因为简单？
您能否指出规则或元数据中的哪个位置，@acoder？我知道有时人们会在 cmets 中回答，但恕我直言，一个真实的答案（甚至是一个公认的答案）将问题标记为已完成，因此对其他人更有用。
事实上，@acoder，如果您查看Comment Privileges 中的何时应该我发表评论？部分，您会看到，相反，在 cmets 中回答不是一个好习惯。它没有说明答案的复杂性。
好吧好吧！！！！对不起！！

标签： html css custom-data-attribute

【解决方案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>

【讨论】：

伟大而简单。谢谢！