html - 仅在悬停时显示工具提示

Question

我为点导航制作了一些工具提示。现在可见，但我希望它们仅在悬停时可见。 我做错了什么？

我玩过一些 display: none 和 visibility 但是当我写这样的代码时:

span.tooltip {
display: none;
}

span.tooltip:hover {
display: block;
}

没有任何反应，它们根本不可见。

这是一个 JSFiddle。 http://jsfiddle.net/hEZmE/

HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
                <a href="#fbsection1" class="cbp-fbcurrent"><span class="tooltip">Home</span></a>
                <a href="#fbsection2"><span class="tooltip">De mogelijkheden</span></a>
                <a href="#fbsection3"><span class="tooltip">Restauratie</span></a>
                <a href="#fbsection4"><span class="tooltip">Het proces</span></a>
                <a href="#fbsection5"><span class="tooltip">Werkplaats</span></a>
                <a href="#fbsection6"><span class="tooltip">Ambacht en Handwerk</span></a>
                <a href="#fbsection7"><span class="tooltip">Contact</span></a>
            </nav>

<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>
<section id="fbsection6"></section>
<section id="fbsection7"></section>

CSS

.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 1px solid #333;
}

.no-touch .cbp-fbscroller > nav a:hover {
background: #333;
}

.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #333;
}

#fbsection1 {
background-color: #ccc;
height: 800px;
}

#fbsection2 {
background-color: #aaa;
height: 800px;
}

#fbsection3 {
background-color: #ccc;
height: 800px;
}

#fbsection4 {
background-color: #aaa;
height: 800px;
}

#fbsection5 {
background-color: #ccc;
height: 800px;
}

#fbsection6 {
background-color: #aaa;
height: 800px;
}

#fbsection7 {
background-color: #ccc;
height: 800px;
}


span.tooltip {
position: absolute;
margin-top: -6px;
margin-left: -120px;
width: 100px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
color: #fff;
background: #333;
}

Answer 1

一方面，您的代码无法正常工作，因为您已将悬停事件应用于未显示的工具提示——您不能将鼠标悬停在不存在的东西上(正如 berentrom 指出的那样) .

span.tooltip {
    display: none;
}

span.tooltip:hover {
    display: block;
}

您要做的是在将鼠标悬停在点上时显示工具提示，因此您需要将悬停事件与点相关联，而不是工具提示。

将此添加到您的 CSS:

span.tooltip { 
    display: none; 
}

#cbp-fbscroller a:hover > span.tooltip {
    display: block;
}

参见此处:http://jsfiddle.net/hEZmE/4/