0

我有一个工具提示，它基本上不起作用。我做了一些搜索，通常的反应是你没有添加你的职位，但是我有这些，我真的很难过。

问题是在下面的现场演示中，左侧图标的工具提示不会在右侧内容的顶部，所以我看不到它。

代码主要在这里；

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>

有跨度类引用工具提示，但这个文本框不会让我将它们添加为代码。

简而言之，它不起作用。我确实有这个例子：

抱歉，如果浏览代码很痛苦，我是新手，刚开始我的第一个投资组合，我还没有组织或评论太多。

非常感谢。

4

1 回答 1

0

……………………………………………………………………………………………………………………………………

您好，现在定义您的#content 职位和z-index

像这样

#content{
position:relative;
z-index:-1;
}

或第二个选项

#icons{
position: relative;
    z-index: 2;
}

用于不透明度

写这个 CSS

#info:hover, #portfolio:hover, #email:hover, #skype:hover, #twitter:hover{
opacity:1;
}
于 2012-10-03T10:49:52.507 回答