查看放大的圖像在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。