僅在懸停時顯示工具提示

Question

我爲我的點導航提供了一些工具提示。現在可見，但我希望它們只能在懸停時可見。 我在做什麼錯？

我打得有點與顯示：無和知名度，但是當我做這樣的代碼：

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

一兩件事，您的代碼不爲工作，是因爲你已經應用了您H而不是顯示的工具提示 - 你不能將鼠標懸停在不存在的東西上（如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/