jquery - CSS 图像标注和模糊使高度看起来变大

Question

我正在努力使用 css 和 javascript 创建上述效果。到目前为止，我已经实现了功能悬停。我的主要问题是，当模糊时，图像的高度似乎增加了 10 像素左右。

此外，当 .container div 的宽度不是图像宽度时，您也可以看到标注图像移动约 10 像素。

更新:

在我查看检查器中的 .container div 时，它比其中的 img 大，但我不确定是什么原因造成的。但正是这个额外的高度导致了这两个问题。

var highlight = function(sel, info) {
  $(sel + ' .box').css({
    opacity: 1
  });
  $(sel).mouseenter(function() {
    var w = $(sel).width();
    var h = $(sel).height();
    $(sel + ' img').addClass('blur');
    $(sel + ' .box').css({
      top: info.top + 'px',
      left: info.left + 'px',
      width: info.width + 'px',
      height: info.height + 'px',
      opacity: 1,
      'background-size': w + 'px ' + h + 'px',
      'background-origin': 'border-box',
      'background-position': (0 - info.top) + 'px ' + (0 - info.left) + 'px',
      'background-image': 'url(' + $(sel + ' img').attr('src') + ')'
    });
    $(sel + ' .overlay-a').css({
      top: 0 + 'px',
      left: 0 + 'px',
      right: 0 + 'px',
      bottom: (h - info.top) + 'px',
    });
    $(sel + ' .overlay-b').css({
      top: info.top + 'px',
      left: 0 + 'px',
      right: (w - info.left) + 'px',
      bottom: 0 + 'px'
    });
    $(sel + ' .overlay-c').css({
      top: info.top + 'px',
      left: (info.left + info.width) + 'px',
      right: 0 + 'px',
      bottom: 0 + 'px'
    });
    $(sel + ' .overlay-d').css({
      top: (info.top + info.height) + 'px',
      left: info.left + 'px',
      right: (w - info.left - info.width) + 'px',
      bottom: 0 + 'px'
    });
  }).mouseleave(function() {
    $(sel + ' img').removeClass('blur');
    $(sel + ' .box').css({
      top: 0 + 'px',
      left: 0 + 'px',
      width: 0 + 'px',
      height: 0 + 'px',
      opacity: 0,
      'background-image': 'none'
    });
    $(sel + ' .overlay-a, ' + sel + ' .overlay-b, ' + sel + ' .overlay-c, ' + sel + ' .overlay-d').css({
      top: 'auto',
      left: 'auto',
      right: 'auto',
      bottom: 'auto',
    });
  });
}

highlight('#document', {
  top: 10,
  left: 10,
  width: 200,
  height: 200
});

.container {
  position: relative;
  width: 500px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  overflow: hidden;
  box-sizing: border-box;
}
.box {
  position: absolute;
  width: 0px;
  left: 0px;
  border: 2px solid black;
  z-index: 2;
  box-sizing: border-box;
}
.container img {
  width: 100%;
  z-index: 1;
}
.overlay {
  position: absolute;
  opacity: 0.1;
  background-color: black;
  z-index: 2;
  top: 0px;
  left: 0px;
  box-sizing: border-box;
}
.blur {
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="document" class="container">
  <img src="http://lorempixel.com/600/400" />
  <div class="overlay overlay-a"></div>
  <div class="overlay overlay-b"></div>
  <div class="overlay overlay-c"></div>
  <div class="overlay overlay-d"></div>
  <div class="box"></div>
</div>

Answer 1

因为您在 .container 中使用 overflow:hidden 也给出了 height，那么高度问题就解决了:

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

Working demo , Full Screen DEMO