Jquery CSS图像标注和模糊使高度似乎增加

我正在使用css和javascript创建上述效果。到目前为止，我有一个功能悬停工作。我的主要问题是，当图像模糊时，其高度似乎会增加10像素左右

此外，当

.container

div的宽度不是图像宽度时，您也可以看到标注图像移动了大约10个像素

已更新：

在我查看inspector中的

.container

div时，它比它内部的

img

要大，但我不确定是什么原因造成的。但正是这个额外的高度导致了这两个问题

var highlight=功能（sel，info）{
$（sel+'.box'）.css({
不透明度：1
});
$（sel）.mouseenter（函数（）{
var w=$（sel）.width（）；
var h=$（sel）.height（）；
$（sel+img'）.addClass（'blur'）；
$（sel+'.box'）.css({
top:info.top+‘px’，
左：info.left+px，
宽度：info.width+px，
高度：信息高度+px，
不透明度：1，
“背景大小”：w+“px”+h+“px”，
“背景原点”：“边框框”，
“背景位置”：（0-info.top）+“px”+（0-info.left）+“px”，
“背景图像”：“url（+$（sel+'img'）.attr（'src'）+”）
});
$（sel+'.overlay-a'）.css({
顶部：0+‘px’，
左：0+‘px’，
右：0+‘px’，
底部：（h-info.top）+“px”，
});
$（sel+'.overlay-b'）.css({
top:info.top+‘px’，
左：0+‘px’，
右：（w-info.left）+“px”，
底部：0+‘px’
});
$（sel+'.overlay-c'）.css({
top:info.top+‘px’，
左：（信息左+信息宽）+“px”，
右：0+‘px’，
底部：0+‘px’
});
$（sel+'.overlay-d'）.css({
顶部：（信息顶部+信息高度）+“px”，
左：info.left+px，
右：（w-info.left-info.width）+“px”，
底部：0+‘px’
});
}).mouseleave（函数（）{
$（sel+'img'）。removeClass（'blur'）；
$（sel+'.box'）.css({
顶部：0+‘px’，
左：0+‘px’，
宽度：0+‘px’，
高度：0+‘px’，
不透明度：0，
“背景图像”：“无”
});
$（sel+'.overlay-a'+sel+'.overlay-b'+sel+'.overlay-c'+sel+'.overlay-d'）。css({
顶部：“自动”，
左：“自动”，
右图：“自动”，
底部：“自动”，
});
});
}
突出显示（“#文档”{
前10名，
左:10,，
宽度：200，
身高：200
});
.container{
位置：相对位置；
宽度：500px；
边际：0px；
填充：0px；
边界：0px；
溢出：隐藏；
框大小：边框框；
}
.盒子{
位置：绝对位置；
宽度：0px；
左：0px；
边框：2件纯黑；
z指数：2；
框大小：边框框；
}
.集装箱img{
宽度：100%；
z指数：1；
}
.覆盖{
位置：绝对位置；
不透明度：0.1；
背景色：黑色；
z指数：2；
顶部：0px；
左：0px；
框大小：边框框；
}
.模糊{
-webkit过滤器：模糊（15px）；
-moz滤波器：模糊（15px）；
-o-滤波器：模糊（15px）；
-ms过滤器：模糊（15px）；
滤镜：模糊（15px）；
}
因为您正在使用
溢出：在
中隐藏
。容器
也给出
高度
，那么高度问题就解决了：

.container {
  position: relative;
  width: 600px;
  height: 400px;/*Added*/
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

，
嗨，我稍微调整了一下示例。虽然您的回答确实隐藏了这个问题，但它会阻止我将
.container
的宽度设置为图像宽度以外的值。我已经用这个更新了示例，您可以看到问题现在也出现在callout
.box
div中。由于某种原因，
.container
看起来有额外的高度，但我不确定它来自哪里。