Can someone help me with my dot navigation tooltips? I've managed to make them visible, but now I want them to only appear on hover. What am I missing?
I've experimented with display: none and visibility but when I tried this code:
span.tooltip {
display: none;
}
span.tooltip:hover {
display: block;
}
Nothing changes, they remain invisible.
Check out the JSFiddle link here: 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">The Possibilities</span></a>
<a href="#fbsection3"><span class="tooltip">Restoration</span></a>
<a href="#fbsection4"><span class="tooltip">The Process</span></a>
<a href="#fbsection5"><span class="tooltip">Workshop</span></a>
<a href="#fbsection6"><span class="tooltip">Craftsmanship</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;
}