Question

问题：当使用JQuery交换DIV标签内的元素（图像）时，DIV会垂直移动。当没有实际交换图像并且只是用边框颜色悬停鼠标时，DIV不会移动。所以我知道它并不依赖于：悬停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，但是放置行高：0; placecard上的属性解决了这个问题。

Answer 2

检查出来

.placecard { 
    margin:5px;
    display:inline-block;
    position:relative;
    overflow:auto;
    padding:0px;
    height:200px;/*added*/
    overflow:hidden;
}

Updated Fiddle

JQuery mouseenter导致div元素移动

2 个答案: