Question

我有一些来自W3Schools的外部CSS：

/* Tooltip container */
.tooltip {
    /*position: relative;*/
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 20;

}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

span:hover .tooltiptext {
    display: none;
}

哪个应该对html的下一个块应用一些规则：

<div class="CELL_INFO tooltip">
    <span class="tooltiptext">
        Square resources: '.$WOOD.' wood, '.$IRON_ORE.' iron ore, '.$STONE.' stone.
    </span>
</div>';

在那里，您应该能够通过将鼠标悬停在<span class="tooltiptext">上来显示<div class="CELL_IFNO">中包含的工具提示，然后，如果您将鼠标悬停在该工具提示范围内（或当光标离开包含div时），它应该消失。而且因为你不再徘徊在那个div上，工具提示应该保持隐藏。

基本上我想要实现的是我有工具提示，只有当你悬停父div时才会显示，而不是子工具提示跨度本身。

我的例子不起作用，我不知道如何通过纯CSS来做到这一点。有人可以解释，是什么？

注意： 当display: none;属性绑定到全局范围内时，它可以工作，但是我需要它只能用于＆＃34; tooltiptext＆＃34;类。

Answer 1

您需要删除选择器中的空格

尝试使用span:hover.tooltiptext代替span:hover .tooltiptext

如果介于两者之间，则会选择.tooltiptext个元素内的span:hover个元素。

Answer 2

您的上一条规则说您要选择.tooltiptext中包含的span元素。你想要做的是选择一个span类的.tooltip。试试这个：

span.tooltiptext:hover {
    display: none;
}

或简单地说，

.tooltiptext:hover {
    display: none;
}

将鼠标悬停在CSS工具提示框后如何消失？

2 个答案: