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

【问题标题】：Hover over span to get tool tip div将鼠标悬停在 span 上以获取工具提示 div
【发布时间】：2018-09-25 15:24:56
【问题描述】：

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

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 上，这不是所需的行为。作为一个附带问题，这种结构是我想要实现的最佳方式吗？

【问题讨论】：

标签： html css hover tooltip

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

使用相邻的选择器+你可以定位下一个元素

【讨论】：