查看放大的图像在mouseover上的内容ontop内容使用javascript

Question

我正在尝试使用JavaScript在鼠标悬停上显示较大版本的图像。我的功能正常，但显示属性不正确，我需要将图像显示在页面内容的顶部，即弹出窗口。

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

DEMO - js fiddle

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(); 
     } 

Answer 1

尝试把img标签的列1格之外，然后将不再受到限制。

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

img { 
z-index:2; 
} 

Answer 2

使用：

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

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

Answer 3

这将是限制性的代码中使用的特定元素（IDS）你的脚本。建议您使用元素类来代替。

你可以达到你想要的几种方法，这里是一个使用绝对定位的大图像：

$('.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>

同样在Fiddle。