1

CSS で奇妙な効果が得られます。ボックスの上にマウスを置くと、次のボックスが 32 ピクセル移動します。なんで？チェックボックスが原因だと思いますが、32px左にシフトしました。

デモ

html:

<div class="Z"> <a href="http://google.com"><img src="http://25.media.tumblr.com/tumblr_m9p3n1vJmZ1rexr16o1_400.jpg" class="A"/><img src="http://suvendugiri.files.wordpress.com/2012/02/checkbox.png" class="B"/></a>
    <a
    href="http://google.com">
        <img src="http://25.media.tumblr.com/tumblr_m9p3n1vJmZ1rexr16o1_400.jpg"
        class="A" />
        <img src="http://suvendugiri.files.wordpress.com/2012/02/checkbox.png"
        class="B" />
        </a>
</div>

CSS:

/*.B { display: none; }/**/
 a:hover .B {
    display:inline-block;
}
.B {
    display:none;
    width: 32px;
    position: relative;
    left:-32px;
    vertical-align:top;
}
/
/*/
//.Z > * {vertical-align:top; }

JS (不要):

$('.B').click(function () {
    alert('a');
    return false;
});
4

1 に答える 1

2

left: -32px要素のボックス モデルは移動せず、表示されている場所だけを移動します。私はこれを別の方法で処理します：

a {
    position: relative;
}
 a:hover .B {
     display: inline;
}
.B {
    display:none;
    width: 32px;
    position: absolute;
    right: 0;
}

http://jsfiddle.net/NPXFZ/1/

于 2013-03-02T21:06:29.747 に答える