我有一个工具提示,它基本上不起作用。我做了一些搜索,通常的反应是你没有添加你的职位,但是我有这些,我真的很难过。
问题是在下面的现场演示中,左侧图标的工具提示不会在右侧内容的顶部,所以我看不到它。
代码主要在这里;
a.icon {
position: relative;
text-decoration: none;
}
a.icon .tooltip {
-webkit-transition: opacity 0.5s ease 0.2s, left 0.5s ease 0.2s;
-moz-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
-o-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
opacity: 0;
font-size: 11px;
color: #FFFFFF;
background:url('../images/tooltip.png') no-repeat bottom center;
position:absolute;
height: 40px;
line-height: 50px;
left: 100px;
text-align:center;
padding-left:10px;
width: 110px;
display: block;
top: 24px;
z-index: 1000;
}
a.icon:hover .tooltip {
opacity: 1.0;
top:24px;
}
这是删除了 lorem 的 HTML;
<div id="icons">
<a href="info page" class="icon" id="info"><span class="tooltip">About Me</span>
<a href="portfolio page" class="icon" id="portfolio"><span class="tooltip">Portfolio</span></a>
<a href="mailto:" class="icon" id="email"><span class="tooltip">Mail</span></a>
<a href="?userinfo" class="icon" id="skype"><span class="tooltip">Skype</span> </a>
<a href="" class="icon" id="twitter"><span class="tooltip">Twitter</span></a><!-- Holds the icons for the site -->
</div>
<div id="content">
raesent at quam velit,
</div>
有跨度类引用工具提示,但这个文本框不会让我将它们添加为代码。
简而言之,它不起作用。我确实有这个例子:
抱歉,如果浏览代码很痛苦,我是新手,刚开始我的第一个投资组合,我还没有组织或评论太多。
非常感谢。