Question

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

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

代码主要在这里;

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;

    }

这是HTML，删除了lorem;

<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:kieronboz@gmail.com" class="icon" id="email"><span    class="tooltip">Mail</span></a>
<a href="skype:kieronboz?userinfo" class="icon" id="skype"><span     class="tooltip">Skype</span> </a>
<a href="http://www.twitter.com/kieronboz" 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>

有一些span类引用工具提示，但是这个文本框不允许我将它们添加为代码。

简而言之，它不起作用。我确实有这样的例子：www.kieron.jamiecassidy.co.uk

很抱歉，如果仔细查看代码是很痛苦的，我刚刚开始我的第一个投资组合，而且我还没有组织或评论过。

非常感谢。

Answer 1

.......................................

您好现在定义#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;
}

Z指数不适用，位置已经相对/绝对

1 个答案:

或第二个选项