我的 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;
});
最佳答案
left: -32px
不会移动元素的框模型,只会移动它显示的位置。我会以不同的方式处理:
a {
position: relative;
}
a:hover .B {
display: inline;
}
.B {
display:none;
width: 32px;
position: absolute;
right: 0;
}
关于html - css 位置相对不需要的额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15179398/