鼠標懸停時縮放圖像

Question

當鼠標懸停在縮放的圖像上時，正在嘗試進行更大的縮放。 我的意思是當鼠標懸停在縮放的圖像上時，圖像的某些部分（如正方形，矩形，圓形等）應進行縮放。 我有以下代碼。 請建議我通過onclick縮放圖像后如何實現更大的縮放。

  <div id="overlay"></div>
  <div id="overlayContent">
 <img id="imgBig" src="" alt="" width="400" />
 </div><div class="imgSmall"><img src="xyz" 
 id="ProductPhotoImg">
         </div>
       </div>
 <script>
 $("#ProductPhotoImg").click(function(){
 $("#imgBig").attr("src",$(this).attr('src'));
 $("#overlay").show();
 $("#overlayContent").show();
  });

 $("#imgBig").click(function(){

$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC

  $("#overlay").hide(); 
  $( "#overlayContent" ).hide();
}
});
</script>
<style>
#overlay{
 position: fixed; 
 padding-right:10px;
 width: 100%; 
 height: 100%; 
 top: 0px; 
 left: 0px; 
 background-color: #000; 
 opacity: 0.7;
 filter: alpha(opacity = 70) !important;
 display: none;
 z-index: 100;

}
#overlayContent{
position: fixed;
-webkit-transform: scale(1.7); 
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
align-content:center;
width: 100%;
height: 100%;
display: none;
z-index: 100;
top: 100px;
padding-right: 24em;
padding-left: 14.3em;
top:16.2em;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall, #ProductPhotoImg{
 cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
 }
</style>

這段代碼用於onclick zoom。但是我想進一步放大鼠標懸停以縮放圖像（例如，當鼠標懸停在圖像上時，應該僅縮放圖像的懸停部分），請整理出我的問題朋友。

提前致謝 ：）

Answer 1

最好的方法是使用：hover偽類。 你要做的就是..

// Name class
.class {
  height: 20px;
  width: 20px;
}

.class:hover {
  height: 25px;
  width: 25px;
}

您可以將這些數字更改為所需的任何數字，但是您還應該查看可以在CSS中使用的其他很棒的偽類！ ：） 希望這可以幫助！

Answer 2

為什么不嘗試CSS懸停？

喜歡：

.myClass{
    height: 100px;
    transition: 1s;
}
.myClass:hover{
    height: 200px;
}

在click事件中，您可以調用javascript函數，例如：

function myFunc(object){
    object.className += "myClass";
}

Answer 3

您可以更輕松地做到這一點：

.normalpic {
width: 25px;
height: 25px;
}
.normalpic:hover {
width: 50px;
height: 50px;
}

這將使圖像懸停時放大2倍