2

オーバーフロー: 非表示の div に関する問題があります。それは相対的に配置され、その子divは絶対的に配置されます。カーソルを合わせると、親 div が overflow:hidden から overflow:visible に変わります。これにより、子 div が正しく表示されます。

問題: 他のすべては問題なく動作しますが、マウスが親 div の上にない場合 (オーバーフローが再び非表示になります)、子 div のビットがその場所に表示されます。それらの近くにあるテキストまたはオブジェクトを選択すると完全に消えるため、実際には表示されません。ページが何らかの「更新」を必要としているかのようです。

ここに画像の説明を入力

他の誰かがこれに出くわしましたか? 私はこれにちょっと立ち往生しています...

更新:この問題についてjsfiddleを作成し、webkit ベースのブラウザー (Chrome および Safari) でのみ発生していることに気付きました。その理由は今でもわかりませんが…。

<div class="list-name">
    <ul>
        <li class="truncated">
            <a href="">
                Hover me to see all the magic thext I'm hidding
            </a>
        </li>
    </ul>
</div>
4

2 に答える 2

1

overflow:hiddenハイパーリンクにエクストラを追加すると、問題が解決するようです。この fiddleで確認してください。

于 2013-01-24T15:28:26.730 に答える
-1

That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:

http://jsfiddle.net/Nt5bN/13/

CSS:

.list-name ul {
    margin: 50px;
    padding: 0;
    list-style: none;
}

.list-name li {
    display: block;
    float: left;
    width: 60px;
    height: 29px;   
    overflow: hidden;
    background: #eee;
}

.list-name a {
    width: 300px;
    display: block;
    float: left;
}

.list-name li.truncated:hover {
    overflow: visible;
}

.list-name li.truncated:hover a {

    margin-top: -3px;
    margin-left: -8px;
    background: #fff;
    z-index: 9999;
    padding: 2px 0 2px 7px;
    border-radius: 3px;
    border: 1px solid #ddd;
}
于 2013-01-24T15:29:10.963 に答える