html - 将鼠标悬停在 span 上以获取工具提示 div

Question

如果我将鼠标悬停在仅使用 css 创建的跨度图标上，你们知道如何让我的工具提示显示吗？

HTML

<div>
    <div class="t-hover-block">
        This is the tooltip!
    </div>
    <span class="i-q-mark"></span>
</div>

CSS

.t-hover-block {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1.429em;
    font-size: 10pt;
    padding: 0.929em;
    width: 16em;
    top: 40.4%;
    left: 61%;
    text-align: left;
    background: rgba(255, 255, 255, 1);
    box-shadow: 4px 3px 34px -3px rgba(245, 188, 223, 1);
    &:hover {
        opacity: 1;
    }
}
.t-hover-block::after {
    background-color: rgba(255, 255, 255, 1);
    content: '\00a0';
    height: 0.857em;
    width: 1.071em;
    position: absolute;
    top: 40%;
    left: 97%;
    transform: rotate(29deg) skew(-35deg);
    border: solid 1px rgba(181, 49, 134, 0.3);
    border-left: none;
    border-bottom: none;
}
.i-q-mark {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-color: $color-brand;
    border-radius: 50%;
    text-align: center;
    margin-top: 0.643em;
    margin-left: 0.714em;
    line-height: 2.071em;
    &:after {
        font-family: 'Raleway';
        content: '\3F'; // Hex value for question mark
        color: #ffffff;
        font-size: 16pt;
        font-weight: 700;
    }
}

我可以让它工作，但前提是它悬停在 div 上，而这不是所需的行为。作为附带问题，这种结构是我想要实现的最佳方式吗？

Answer 1

如果你翻转 div 和 span 的顺序，并将这个 css 用于悬停状态，你可以得到你要找的东西:

.i-q-mark:hover + .t-hover-block {
  opacity: 1;
}

HTML:

<div>
    <span class="i-q-mark">Span</span>
    <div class="t-hover-block">
        This is the tooltip!
    </div>
</div>

使用adjacentsibling选择器+可以定位下一个元素