1

オーバーレイとオーバーフローを使用してサムネイルにカーソルを合わせると、フルサイズの画像が表示されるようにしようとしています:hidden & visible。

Firefox と IE では問題なく動作しますが、Chrome と Safari では問題が発生します。ここで見ることができます Webkitアーティファクト

これは私が使用しているCSSです：

.img-thumb
{
    position:relative;
    height:60px;
    width:60px;
    overflow:hidden;
    padding:5px;
    font-family:Comic Sans MS, cursive, sans-serif;
    font-size:14px;
}
.img-full
{
    position:absolute;
    display:none;
    top:0px;
    left:0px;
}
.img-thumb:hover .img-full
{
    display:block;
    z-index:10;
}
.img-thumb:hover
{
    overflow:visible;
}
4

3 に答える 3

0

私は同じ問題を抱えていましたが、JS/jQuery を使用して解決しました:

例えば：

$(".img-thumb").hover(
  function () {
    $(".img-thumb > .img-full").show();
  },
  function () {
    $(".img-thumb > .img-full").fadeOut(1);
  }
);

fadeOut(1) は要素を 1 ミリ秒でフェードさせるため、ユーザーは効果に気付くことができません。

于 2013-07-01T19:43:13.650 に答える
0

ここに表示される唯一のオプション (部分的な回避策として) は、ホバーされた img-thumb コンテナーに適切な高さを割り当てることです (これにより、ブラウザーはマウス アウト時にどのボックスをクリアするかを正確に知ることができます)。

.img-thumb:hover
{
    overflow:visible;
    height: 500px; /* when added clears the artefacts - but total height of hover must be known as set here and shall not change */
}

修正を確認するには、 http://jsfiddle.net/YqSVP/を実際の例として参照してください。ホバーの高さがわかっている場合にのみ十分であり、css 内の値に修正できます。

Webkit がボックス マウス アウトの再描画のクリーンアップ手順を最適化しすぎて、ボックスをクリアするときに絶対位置の子を無視しているように見えますが、ホバー時の表示は問題なく動作します (これは Webkit のバグだと思います)。

于 2013-04-08T07:27:10.100 に答える
0

バグは に依存しているようですposition: absolute(私は で試しましたがposition: relative、バグも表示されます) .img-full。

もちろん、それを作成するposition: static(または単に削除するposition: absolute) とoverflow: hidden適切に動作しますが、.img-full.

于 2013-03-28T08:59:07.083 に答える