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

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

但是，两个解决方案都不能正常工作，因为div元素被屏蔽了。如果我将span元素放在div之外 - 我仍然可以将其作为目标通过div:hover + span，它将是定义的CSS网格中的一个元素，并且不能与div元素完全相关。

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

我尝试了什么：

（1）跨越div

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（2）：伪元素

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（3）跨越div后

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是“span after div”版本的功能代码。我添加了一些JS＆amp; 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>