我有一份产品清单。将鼠标移到产品上时,框会放大,您可以看到产品其他图像的缩略图。
我发现只有css的解决方案:
HTML:
<div class="row">
<div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
<div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
<div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
<div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
</div>
<div class="row">
... other row with 4 boxes
</div>
CSS:
.row {
margin-bottom: 13px;
clear: both;
position: relative;
float: left;
}
.boxProdotto{
position: relative;
width: 175.5px;
margin-left: 13px;
float: left;
background: #FFF;
}
.boxProdotto .thumbs {
display: none;
}
.boxProdotto:hover{
border: 2px solid #9d3951;
border-radius: 3px;
padding: 11px;
position: relative;
left: 0;
margin: -13px -13px -200px 0;
z-index: 200;
}
.boxProdotto:hover .thumbs {
display: block;
}
因为onmouseover状态下盒子的高度根据有多少缩略图而变化,所以我决定用JQuery计算边缘底部应该多少:
JQuery的:
// Set the attribute data-h with the normal height of the box
$(".boxProdotto").each(function(){
$(this).attr('data-h', $(this).height());
});
// on mouse over set the margin bottom calculated
$(".boxProdotto").mouseover(function(){
// margin-bottom = boxHeight - boxHeightOnMouseOver - border - paddingBottom
$(this).css('margin-bottom', ( $(this).attr('data-h') - $(this).height() - 2 - 11));
}).mouseout(function(){
$(this).css('margin-bottom', 0);
});
此解决方案适用于所有浏览器(Firefox,Chrome,Safari Mac&amp; Win),但在IE8和IE9中存在神秘感!虽然在IE10上运行良好... IE7我无法测试它,但我认为它不起作用..
对于IE8,似乎应用的负边距没有影响。但奇怪的是,将鼠标放在第一个产品的图像上,框放大,你会看到下一行向下移动。但是将鼠标移到缩略图上(将鼠标放在同一个盒子上)然后神奇地工作并且应用了margin-bottom!
看着我发现了很多与IE保证金负面和Jquery onmouseover / onmouseout相关的错误/问题,我的情况似乎是两者的混合。
使用神奇的开发人员工具,使用IE几乎不可能调试页面!
答案 0 :(得分:1)
你可以尝试做的是使用条件语句来检测IE8,然后在jQuery中将一个类添加到需要margin-bottom的元素中。
<!--[if gte IE 8]>
<style>
.marginBottomIE { bottom: -200px; }
</style>
<![endif]-->
如果您使用的是Modernizr,您只需使用添加到正文中的.ie8类检测浏览器。
<强>的jQuery 强>
if($('.ie8').length > 0){
$('.boxProdotto').addClass('marginBottomIE');
}
然后你可以在计算margin-bottom后添加一个简单的if条件,例如:
if(marginBottom < 0){ $('.boxProdotto').addClass('marginBottomIE'); }
<强> CSS 强>
.marginBottomIE { bottom: -200px; }
希望这会有所帮助:)