使用 JavaScript 在鼠标悬停时在内容顶部查看放大的图像

view enlarged image ontop of content on mouseover with javascript

本文关键字：放大 图像 顶部 鼠标 JavaScript 悬停 使用      更新时间：2023-09-26

我正在尝试使用javascript在鼠标悬停时显示图像的更大版本。我有功能工作，但是显示属性不正确，我需要将图像显示在页面内容的顶部，即弹出窗口。

我如何将其添加到我的代码中。我遇到的问题是我的页面被分成列，所以图像受到列宽度的限制，所以我需要一种方法来覆盖它，即使用弹出窗口。

演示 - js 小提琴

.html：

<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>

JavaScript：

function bigImg() {
            $("#test1").show();
        }
        function normalImg() {
            $("#test1").hide();
        }

使用特定元素 （ID） 对脚本进行编码是有限制性的。建议你改用元素类。

您可以通过多种方式实现您想要的，这里有一种使用大图像的绝对定位：

$('.small-image').on('mouseenter', function(e) {
  $(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
  $(this).siblings('.big-image').hide();
})
body {
  overflow-x: hidden;
}
.row::after {
  content: ' ';
  display: block;
  clear: both;
}
.column {
  float: left;
}
.column1 {
  width: 20%;
}
.column2 {
  width: 80%;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.enlarge {
  position: relative;
}
.big-image {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="column column1">
    <div class="enlarge">
      <img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
      <div class="big-image">
        <img src="http://lorempixel.com/400/300/" alt="" />
      </div>
    </div>
  </div>
  <div class="column column2">
    A LOT OF TEXT IN HERE
  </div>
</div>

也在小提琴上。

尝试将 img 标签放在 column1div 之外，然后它将不再受到限制。

如果 img 未显示在文本顶部，请尝试添加 css 值 z-index。

img {
z-index:2;
}

使用 ：

$("#test" ).hover(function() {
  $("#test1").show();
},function(){
    $("#test1").hide();
});

https://jsfiddle.net/2rt836co/4/

相关文章：