Question

我试图在jquery和CSS中悬停缩略图时显示大图像。我有2张图片

      <td>
        <% if camera["is_public"] == "t" %>
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="32" class="thumbnails">
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="600" class="full-image">
        <% else %>
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="32" class="thumbnails">
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="600" class="full-image">
        <% end %>
      </td>

和CSS为

.full-image {
  display: none;
  z-index: 99999;
  top: 10%;
  width: 600px;
  height: auto;
  right: 34%;
}

在悬停.thumbnail时触发此功能

onImageHover = ->
  $("#snapshots_datatables").on "mouseover", ".thumbnails", ->
    nextImage = $(this).siblings(".full-image")
    $(nextImage).css({"top": "10%"})
    nextImage.show()

  $("#snapshots_datatables").on "mouseout", ".thumbnails", ->
    nextImage.hide()

我的所有问题都是我希望在屏幕中心悬停height: 600但显示.thumbnail图片时显示屏幕尺寸和滚动。即使我向下滚动图像应该在屏幕的中心apprea。任何帮助将不胜感激。我自己添加CSS没有运气。

编辑：与bootstrap模型相同，即使它在屏幕中非常向下点击，但它出现在屏幕中间。

Answer 1

你真的不需要javascript。我认为css可以解决问题。

首先，您要确保.full-image始终位于屏幕的中心。

.full-image {
  position: fixed;
  width: 600px;
  height: 600px;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -300px;
  background: red;
  display: none;
}

然后，当您将鼠标悬停在.thumbnail

上时，您希望它显示出来

.thumbnail:hover .full-image {
  display: block;
}

这是工作演示
http://codepen.io/Jeffersonvdh/pen/GZBMBQ

在屏幕css jquery的中心显示图像

1 个答案: