Css的幫助？懸停圖片

嗨我需要一些CSS幫助我有一些擴展，當我將鼠標懸停在他們，但它同時Css的幫助？懸停圖片

 <style> 
    .box 
{ 
    width: 750px; 
    height: 1000px; 
    border:1px solid green; 


} 
.enlarge-onhover { 
    width: 125px; 
    height: 125px; 
} 

.enlarge-onhover:hover { 
    width: 225px; 
    height: 225px; 
} 
</style>

我不希望它這樣做，我想它推動一切的圖片重疊其餘的圖像，並擴大左鍵單擊而不是懸停

來源

2013-05-21 Daniel Quinn

嘗試使用'float'標籤？如'float：right'。在我看來，你應該爲此使用JQuery。 – TheGeekZn

將它改爲點擊動作需要javascript，否則你可以使用活動的僞類，但我會推薦jQuery來簡化和控制 – Pete

您可以這樣做的一種方法是使用Absolute positioning。

問題是，當你徘徊，你改變大小（寬度和高度），所以它會移動所有內容並重新呈現頁面。

來源

2013-05-21 10:45:00 Dave

如果你想讓它發生，你可以使用javascript（jquery爲你做這個）onclick。

您必須將position: absolute;放在您的圖片上，以免打擾其他元素。

$(".enlarge-onhover").click(function() { 

     $(this).css({width: 255, height: 255}); 
});

如果你只是希望它懸停結果，那麼只需添加position: absolute;到圖像的CSS。

如果你不使用jQuery和純JavaScript，你可以通過做同樣的事情;

var img = document.getElementById("myImg"); 

img.addEventListener("click", function() { 

    img.style.width = "255px"; 
    img.style.height = "225px"; 
}, false);

以上假設您的圖片的ID爲myImg。

來源

2013-05-21 10:46:31 GriffLab

-1

除了沿X軸和Y軸定位圖像外，還可以設置Z軸使元素顯示爲一個在另一個之上。

我認爲解決方案是增加上懸停元件的z索引作爲
z索引：50;

您需要的z-index的重置爲0，一旦用戶未懸停

這當設置懸停/放大的圖像看起來像縮略圖放大的位置相結合，會做你的訣竅。

您可以瞭解更多有關z-index的位置：
http://www.w3schools.com/cssref/pr_pos_z-index.asp

來源

2013-05-21 10:50:54

這仍然會推動其他元素！ – GriffLab

即使它與絕對位置相結合？ –

Css的幫助？懸停圖片

回答

相關問題