如何使屏蔽 div 内的元素完全可见（工具提示样式）？

Question

对于基于图标的菜单，我在网格中有几个 <div> 元素。每个元素实际上都是空的，应用了一些通用 CSS 和内联 CSS 来设置掩码。

使用图像作为蒙版的原因是为了让图标以各种方式着色（通过设置 div 的背景颜色）。请参阅下面的示例代码段，图标在悬停时会改变颜色，在单击时会保持颜色。

$('.qs').click(function() {
  $(this).toggleClass('active');
});

div.icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-gap: 0rem;
    justify-content: space-between;
    background-color: #eee;
}
div.icons .qs {
    height: 30px;
    width: 30px;
    cursor: help;
    margin: 9px;
    transition: all 250ms;
}
div.icons div.qs {
    background-color: rgb(134,134,134);
}
div.icons div.qs.qs-ecod:hover,
div.icons div.qs.qs-ecod.active {
    background-color: rgb(39, 128, 186);
}
div.icons div.qs.qs-sust:hover,
div.icons div.qs.qs-sust.active {
    background-color: rgb(235, 98, 28);
}
div.icons div.qs.qs-cost:hover,
div.icons div.qs.qs-cost.active {
    background-color: rgb(51, 172, 95);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
<div class="qs qs-ecod" style="-webkit-mask-image: url(https://png.icons8.com/material/30/key.png); mask-mode: alpha;" data-tid="1" title="Login"></div>
<div class="qs qs-sust" style="-webkit-mask-image: url(https://png.icons8.com/material/30/settings.png); mask-mode: alpha;" data-tid="2" title="Settings"></div>
<div class="qs qs-cost" style="-webkit-mask-image: url(https://png.icons8.com/material/30/home.png); mask-mode: alpha;" data-tid="3" title="Add something"></div>
</div>

现在，每个元素都有一个包含菜单项名称的 title 属性。当用户将鼠标光标留在元素上时，浏览器将（延迟）显示一个工具提示，显示菜单项名称。到目前为止这很好，但现在客户想要一个样式化的工具提示，所以我考虑在 div 中使用最初隐藏的 span 元素或使用伪元素来显示 title 属性。

但是，由于 div 元素被屏蔽，这两种解决方案都无法正常工作。如果我将 span 元素放在 div 之外 - 我仍然可以定位，例如通过 div:hover + span，它将成为定义的 CSS 网格中的一个元素，并且不能相对于 div 元素绝对放置。

有没有办法让一个元素完全可见，即使它包含在一个被屏蔽的元素中？我确实可以控制输出，但如果可能的话，我不想添加包装器元素。

我尝试了什么：

(1) 内部跨度 div

$('.qs').click(function() {
  $(this).toggleClass('active');
});

div.icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-gap: 0rem;
    justify-content: space-between;
    background-color: #eee;
}
div.icons .qs {
    height: 30px;
    width: 30px;
    cursor: help;
    margin: 9px;
    transition: all 250ms;
}
div.icons div.qs {
    background-color: rgb(134,134,134);
}
div.icons div.qs.qs-ecod:hover,
div.icons div.qs.qs-ecod.active {
    background-color: rgb(39, 128, 186);
}
div.icons div.qs.qs-sust:hover,
div.icons div.qs.qs-sust.active {
    background-color: rgb(235, 98, 28);
}
div.icons div.qs.qs-cost:hover,
div.icons div.qs.qs-cost.active {
    background-color: rgb(51, 172, 95);
}

div.qs span {
  display: none;
}
div.qs:hover span {
  display: inline-block;
  background-color: #fc0;
  color: black;
  line-height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
<div class="qs qs-ecod" style="-webkit-mask-image: url(https://png.icons8.com/material/30/key.png); mask-mode: alpha;" data-tid="1" title="Login"><span>Login</span></div>
<div class="qs qs-sust" style="-webkit-mask-image: url(https://png.icons8.com/material/30/settings.png); mask-mode: alpha;" data-tid="2" title="Settings"><span>Settings</span></div>
<div class="qs qs-cost" style="-webkit-mask-image: url(https://png.icons8.com/material/30/home.png); mask-mode: alpha;" data-tid="3" title="Add something"><span>Add</span></div>
</div>

(2) :伪元素

$('.qs').click(function() {
  $(this).toggleClass('active');
});

div.icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-gap: 0rem;
    justify-content: space-between;
    background-color: #eee;
}
div.icons .qs {
    height: 30px;
    width: 30px;
    cursor: help;
    margin: 9px;
    transition: all 250ms;
}
div.icons div.qs {
    background-color: rgb(134,134,134);
}
div.icons div.qs.qs-ecod:hover,
div.icons div.qs.qs-ecod.active {
    background-color: rgb(39, 128, 186);
}
div.icons div.qs.qs-sust:hover,
div.icons div.qs.qs-sust.active {
    background-color: rgb(235, 98, 28);
}
div.icons div.qs.qs-cost:hover,
div.icons div.qs.qs-cost.active {
    background-color: rgb(51, 172, 95);
}

div.qs:hover:before {
  content: attr(title);
  display: inline-block;
  background-color: #fc0;
  color: black;
  line-height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
<div class="qs qs-ecod" style="-webkit-mask-image: url(https://png.icons8.com/material/30/key.png); mask-mode: alpha;" data-tid="1" title="Login"></div>
<div class="qs qs-sust" style="-webkit-mask-image: url(https://png.icons8.com/material/30/settings.png); mask-mode: alpha;" data-tid="2" title="Settings"></div>
<div class="qs qs-cost" style="-webkit-mask-image: url(https://png.icons8.com/material/30/home.png); mask-mode: alpha;" data-tid="3" title="Add something"></div>
</div>

(3) 在 div

之后跨度

$('.qs').click(function() {
  $(this).toggleClass('active');
});

div.icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-gap: 0rem;
    justify-content: space-between;
    background-color: #eee;
}
div.icons .qs {
    height: 30px;
    width: 30px;
    cursor: help;
    margin: 9px;
    transition: all 250ms;
}
div.icons div.qs {
    background-color: rgb(134,134,134);
}
div.icons div.qs.qs-ecod:hover,
div.icons div.qs.qs-ecod.active {
    background-color: rgb(39, 128, 186);
}
div.icons div.qs.qs-sust:hover,
div.icons div.qs.qs-sust.active {
    background-color: rgb(235, 98, 28);
}
div.icons div.qs.qs-cost:hover,
div.icons div.qs.qs-cost.active {
    background-color: rgb(51, 172, 95);
}

div.qs + span {
  display: none;
}
div.qs:hover + span {
  display: inline-block;
  background-color: #fc0;
  color: black;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
<div class="qs qs-ecod" style="-webkit-mask-image: url(https://png.icons8.com/material/30/key.png); mask-mode: alpha;" data-tid="1" title="Login"></div><span>Login</span>
<div class="qs qs-sust" style="-webkit-mask-image: url(https://png.icons8.com/material/30/settings.png); mask-mode: alpha;" data-tid="2" title="Settings"></div><span>Settings</span>
<div class="qs qs-cost" style="-webkit-mask-image: url(https://png.icons8.com/material/30/home.png); mask-mode: alpha;" data-tid="3" title="Add something"></div><span>Add</span>
</div>

Answer 1

这是"span after div"版本的功能代码。我添加了一些 JS 和 CSS 代码。

$('.qs').click(function() {
  $(this).toggleClass('active');
});

$('div.qs + span').each(function() {
  var offset = $(this).prev().offset().left;
  $(this).css('left', offset + 'px');
});

div.icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-gap: 0rem;
    justify-content: space-between;
    background-color: #eee;
}
div.icons .qs {
    height: 30px;
    width: 30px;
    cursor: help;
    margin: 9px;
    transition: all 250ms;
}
div.icons div.qs {
    background-color: rgb(134,134,134);
}
div.icons div.qs.qs-ecod:hover,
div.icons div.qs.qs-ecod.active {
    background-color: rgb(39, 128, 186);
}
div.icons div.qs.qs-sust:hover,
div.icons div.qs.qs-sust.active {
    background-color: rgb(235, 98, 28);
}
div.icons div.qs.qs-cost:hover,
div.icons div.qs.qs-cost.active {
    background-color: rgb(51, 172, 95);
}

div.qs + span {
  display: none;
}
div.qs:hover + span {
  display: inline-block;
  background-color: #fc0;
  color: black;
  width: auto;
  position: absolute;
  top: 57px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
<div class="qs qs-ecod" style="-webkit-mask-image: url(https://png.icons8.com/material/30/key.png); mask-mode: alpha;" data-tid="1" title="Login"></div><span>Login</span>
<div class="qs qs-sust" style="-webkit-mask-image: url(https://png.icons8.com/material/30/settings.png); mask-mode: alpha;" data-tid="2" title="Settings"></div><span>Settings</span>
<div class="qs qs-cost" style="-webkit-mask-image: url(https://png.icons8.com/material/30/home.png); mask-mode: alpha;" data-tid="3" title="Add something"></div><span>Add</span>
</div>

如何使屏蔽 div 内的元素完全可见（工具提示样式）？

How to make element inside masked div fully visible (tooltip style)?

css

mask