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;
}

または2番目のオプション

#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 に答える