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/

仅在悬停时显示工具提示

1 个答案: