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>

使用相邻的兄弟选择器+，您可以定位下一个元素

将鼠标悬停在跨度上以获得工具提示div

1 个答案: