0

私はプロパティを持ついくつか<li>の を持っているdisplay: inlineので、それらは隣り合わせに並んでいます。

これら<li>には画像が含まれているため、サムネイル サイズの画像が多数並んでいる効果が得られます。

画像にカーソルを合わせると、非表示の div の内容を表示する css プロパティを設定しました。

この div はスタイル設定され、画像の上に表示され、左に 50px、上に -200px オフセットされます (ツールチップ スタイルの配置と表示を考えてください)。 

#information {
    display: none;
}

ul li:hover #information {
    display:block;
    position: absolute;
    background:#FFFFFF;
    color: #000000;
    border: 1px solid #CCCCCC;
    width: 190px;
    height: 250px;
    left: 50px;
    top: -200px;
    overflow: hidden;
}

私が望む動作は、ホバー状態のdivオフセットが画像、つまり個人に対して相対的であること<li>です。

私が現在持っている動作は、ホバー状態のdivオフセットがすべてのコンテナに対して相対的であること<li>です。

上記のコード サンプルでは、​​ホバー状態の div の位置が絶対的であることがわかります。私は位置を相対に設定していましたが、これをホバーすると、他<li>の の位置が変更されました (これはおそらく、ホバー状態の div が元のdisplay: blockプロパティを変更するプロパティがdisplay: hiddenあります)、ホバー状態の div は、個々の ではなくコンテナーに対して相対的に表示されていました<li>。位置を絶対に設定すると、の位置が<li>保持されます。

だから私の質問は、ホバー状態のdivのオフセットを、<li>のコンテナではなく、個人に対して相対的にする方法です<li>。

4

1 に答える 1

1

解決策は、ul li に a を追加position: relativeし、ホバー状態の div に 2 の z-index を追加することでした。

于 2012-11-12T02:35:09.833 に答える