jQuery mouseenter 导致div元素移动

Question

问题:当使用 JQuery 换出 DIV 标记内的元素(图像)时，DIV 会垂直移动。当实际上不交换图像而只是将鼠标悬停在边框颜色上时，DIV 不会移动。所以我知道它与 :hover CSS 问题无关。最终，图像将换出以包含嵌入视频预览。我通过使用可爱的小猫图像简化了它，它们产生了同样的问题。

CSS:

.placecard { 
  margin:5px;
  display:inline-block;
  position:relative;
  overflow:auto;
  padding:0px;
  border: 1px solid #12142E;
  overflow:hidden;
}
@media (max-width: 1250px) {
  .placecard {
    max-width:23.64%;
    height:auto;
  }
}

@media (max-width: 1110px) {
  .placecard {
    max-width:31.64%;
    height:auto;
  }
}
@media (max-width: 900px) {
  .placecard {
    max-width:31.32%;
    height:auto;
  }
}

@media (max-width: 768px) {
  .placecard {
    max-width:47.52%;
    height:auto;
  }
}
@media (max-width: 552px) {
  .placecard {
    max-width:46.5%;
    height:auto;
  }
}
@media (max-width: 480px) {
  .placecard {
    max-width:44.5%;
    height:auto;
  }
}

Javascript:

$(".placecard").mouseenter(function() {
$(this).find(".modelimg").attr("id","object_container");

    var model = $(this).attr("title");
    var width = $(this).width();
    var height = $(this).height();
console.log(model+":"+width+":"+height);

var container    = document.getElementById('object_container'),
    parent       = container.parentNode,
    newContainer = document.createElement('div'),

    i            = 0;
while( !!document.getElementById('object_container_' + i ) ) { i++; }

newContainer.id = 'object_container_' + i;
newContainer.className = 'npt-object-container';
newContainer.style.display = 'inline-block';

newContainer.innerHTML = "<img width="+width+" height="+height+" src=\"http://placekitten.com/300/200\" >"
parent.insertBefore(newContainer, container);
$(container).css("display","none");
console.log($(newContainer).height());

}).mouseleave(function() {
    $("#object_container_0").remove()
    $("#object_container").css("display","block");
    $(this).find(".modelimg").removeAttr("id");
});

HTML:

<div class="placecard"  data-profile="" title="Cat1">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat2">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat3">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat4">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat5">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat6">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

<div class="placecard"  data-profile="" title="Cat7">

<img src="http://placekitten.com/g/300/200" class="modelimg"  />                    
</div>

还有一个句柄 JSFiddle:http://jsfiddle.net/5snwxy6v/

JSFiddel 更新:http://jsfiddle.net/5snwxy6v/3/

Answer 1

有点hacky，但是放置line-height:0; placecard 上的属性解决了这个问题。