在鼠標懸停時顯示大圖像與自動位置

Question

我有問題顯示鼠標懸停與自動定位大圖像。鼠標懸停時顯示右側和右側它的所有圖像出界，也需要額外的空間底部。 這是我的代碼。

$(document).ready(function() { 
 
\t $('#portfolio li').click(function() { 
 
\t \t // fetch the class of the clicked item 
 
\t \t var ourClass = $(this).attr('class'); 
 
\t \t 
 
\t \t // reset the active class on all the buttons 
 
\t \t $('#filterOptions li').removeClass('active'); 
 
\t \t // update the active state on our clicked button 
 
\t \t $(this).parent().addClass('active'); 
 
\t \t 
 
\t \t if(ourClass == 'all') { 
 
\t \t \t // show all our items 
 
\t \t \t $('#portfolio').children('section.item').show(1000); \t 
 
\t \t } 
 
\t \t else { 
 
\t \t \t // hide all elements that don't share ourClass 
 
\t \t \t $('#portfolio').children('section:not(.' + ourClass + ')').hide(1000); 
 
\t \t \t // show all elements that do share ourClass 
 
\t \t \t $('#portfolio').children('section.' + ourClass).show(1000); 
 
\t \t } 
 
\t \t return false; 
 
\t }); 
 
});

.Enlarge { 
 
position:relative; 
 
height:150px; 
 
width:250px; 
 
}  
 
.Enlarge span { 
 
position:absolute; 
 
left: -9999px; 
 
visibility: hidden; 
 
opacity: 0;-webkit-transition: opacity 0.5s ease; 
 
-moz-transition: opacity 1s ease; 
 
-ms-transition: opacity 1s ease; 
 
-o-transition: opacity 1s ease; 
 
transition: opacity 1s ease; 
 
} 
 
    
 
div.Enlarge:hover{ 
 
z-index: 999; 
 
cursor:pointer; 
 
}  
 
div.Enlarge:hover span{ 
 
visibility: visible; 
 
opacity: 1; 
 
top: 50px; 
 
left: 0px; 
 
width:500px; 
 
height:300px; 
 
padding: 5px; 
 
background:#9f499b; 
 

 
} \t

<section class="item brochure"> 
 
<div class="Enlarge"> 
 
    small image 1 
 
    <span>large image 1</span> 
 
</div> 
 
</section> 
 
<section class="item brochure"> 
 
<div class="Enlarge"> 
 
    smal image 2 
 
    <span>large image 2</span> 
 
</div> 
 
</section> 
 
<section class="item brochure"> 
 
<div class="Enlarge"> 
 
    small image 3 
 
    <span>small image 3</span> 
 
</div> 
 
</section> 
 
<section class="item brochure"> 
 
<div class="Enlarge"> 
 
    small image 4 
 
    <span>large image 4</span> 
 
</div> 
 
</section>

here is image

Answer 1

你可以這樣做：http://fiddle.jshell.net/oqzekcv8/5/

該腳本將使用JavaScript（和jQuery），以顯示和隱藏圖像，有一兩件事值得一提的是，腳本如果您顯示的圖像的座標與您的光標相同，則表現會很差，所以我用5個像素向下並向左偏移了它們。

如果由於某種原因小提琴是到這裏是腳本本身：

$(document).ready(function() { 
    $('.Enlarge').mouseenter(function(){ 
     $(this).find('.expandedImage').show(); 
     var container = $(this); 
     var containerOffset = container.offset(); 
     var largeImage = container.find('.expandedImage'); 
     $(container).on('mousemove.imageFollow', function(event){ 
      var left = event.pageX - containerOffset.left + 5; 
      var top = event.pageY - containerOffset.top + 5; 
      if(event.clientX + largeImage.width() + 5 >= $(window).width()) 
       left = $(window).width() - largeImage.width() - containerOffset.left -2; 
      if(event.clientY + largeImage.height() + 5 >= $(window).height()) 
       top = $(window).height() - largeImage.height() - containerOffset.top -2; 
      largeImage.css('left', left).css('top', top); 
     }); 
    }).mouseleave(function(){ 
     $(this).off('mousemove.imageFollow'); 
     $(this).closest('.Enlarge').find('.expandedImage').hide(); 
    }); 
}); 

，它會在這樣一個結構工作：

<section class="item brochure"> 
    <div class="Enlarge"> 
     small image 1 
     <div class="expandedImage">large image 1</div> 
    </div> 
</section> 

這樣做的CSS是：

.Enlarge { 
    position:relative; 
    height:150px; 
    width:250px; 
    border:1px solid black; 
    overflow:visible; 
} 
.Enlarge .expandedImage { 
    position:absolute; 
    display:none; 
    white-space:nowrap; 
    background-color:blue; 
    width:600px; 
    height:300px; 
    z-index:10000; 
    pointer-events:none; 
} 

white-space：nowrap是爲了防止瀏覽器將您的演示文本切成小塊，它會如果你只顯示圖像而不是文本，則工作不起作用

另請注意，它綁定mouseenter上的mousemove事件，並在mouseleave上解除綁定，我無法激勵它，我只是發生這樣做，但現在你知道如何做到這一點:)

另請注意：pointer-events：none;根據我的理解，它在IE中不起作用，所以只要將指針放在擴展後的圖像上，圖像就會「自動打開」，只要將它放在頁面的右下角即可該元素沒有收到鼠標事件）