-2

この CSS は IE8 以降 (および Chrome) で機能しますが、IE7 では機能しません。具体的には、div にカーソルを合わせてもツールチップが表示されません。IE7 (および IE6) では何を変更する必要がありますか?

.headertooltip, .headertooltip:visited
{
    color: #0077AA;
    float: left;
    height: 40px;
    text-decoration: none;
    width: 20px;
}

.headertooltip div
{
    background-color: black;
    color: #fff;
    left: 50px;
    padding: 5px 10px 5px 40px;
    position: absolute;
    text-decoration: none;
    top: 82px;
    visibility: hidden;
    width: 900px;
    z-index: 10;
}

.headertooltip:hover div
{
    position: absolute;
    visibility: visible;
}

アップデート：

マウス イベントを使用して div/tooltip を表示するようにコードを更新しましたが、それでも IE7 では機能しません。問題は私のマークアップ/CSSにあると思います。

jsFiddle でサンプルを作成してみました。うまくいきませんが、アイデアはわかります。マウスを左側の小さな黒いボックス (ターゲットが見えるように追加したもの) の上に置くと、ツールチップが表示されます。

http://jsfiddle.net/szyN4/

4

1 に答える 1

1

IE6 では:hover疑似クラスのサポートが最小限であり、IE7 では不完全です。

.headertooltip:hover divtoを変更して.headertooltip div:hover、IE のバブリング メカニズムの奇妙な点を満足させてください。問題が解決する可能性があります (もちろん、IE7 のみの条件付きスタイルシートに含める必要があります)。

mouseenterとを実装することで、JavaScript を使用してこれを回避することもできますmouseleave。クイック リファレンスについては、マウス イベントに関する IE のイノベーションに関する私の投稿された回答を参照してください。

参考文献

于 2012-07-02T14:11:30.120 に答える