懸停在圖像不工作Javascript/JQuery

我正在使用jquery和CSS3的網站上工作。我有圖像和懸停我想縮放圖像。懸停與CSS工作，但我希望它通過JQuery以下代碼我已經嘗試到現在。請幫忙。懸停在圖像不工作Javascript/JQuery

HTML

<!DOCTYPE html> 
<html > 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/app.css" /> 
    </head> 
    <body > 
     <img class="img-responsive" id ="thumbnail" src="my-image-src"> 
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("#thumbnail").on({ 
       mouseenter: function() { 
        $(this).addClass("scaleout"); 
       }, 
       mouseleave:function() { 
        $(this).removeClass("scaleout"); 
       } 
      },'img'); 
     }); 

     </script> 
    </body> 
</html>

CSS

.scaleout { 
    transform: scale(1, 0.80); 
    -ms-transform: scale(1, 0.80); 
    -webkit-transform: scale(1, 0.80); 
}

我還試圖hover()法代替mouseenter和mouseleave在上面的腳本代碼

$(document).load(function(){ 
       $('#thumbnail').hover(function(){ 
        $(this).toggleClass('scaleout'); 
       }, 
       function(){ 
        $(this).removeClass('scaleout'); 
       });  
      });

請幫助爲什麼懸停不工作。

來源

2015-11-14 virendrao

' 'img'）;'to'）;'在第一個方法中不是'$（document）.load（'它是'$（docum （第二種方法） –

將img放入div並聲明向其類的轉換。 –

我創建了一個使用與第二個解決方案非常相似的代碼的小提琴（使用document.ready並且不需要removeClass函數）。 https://jsfiddle.net/L5bj38me/

<script> 
    $(document).ready(function(){ 
    $('#thumbnail').hover(function(){ 
     $(this).toggleClass('scaleout'); 
    }) 
    }); 
</script>

更新OP的問題是由於角度看 - Run jQuery code after AngularJS completes rendering HTML

來源

2015-11-14 07:12:01

我試過相同的代碼，但不知道爲什麼它不工作時，我把我的CSS使用：懸停選擇器的作品。我的圖像獲取呈現使用角度js框架 – virendrao

@virendrao請確保您沒有多個圖像都具有相同的ID。我的小提琴爲你工作嗎？ –

它的作品，但在我的腳本中使用時，雖然不工作，雖然通過css工作 – virendrao

fiddle

<!DOCTYPE html> 
     <html > 
      <head> 
       <link rel="stylesheet" type="text/css" href="css/app.css" /> 
      </head> 
      <body > 
       <img class="img-responsive" id ="thumbnail" src="my-image-src"> 
       <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
       <script> 
       $(document).ready(function(){ 
        $("#thumbnailtest").hover( 
         function() {  
         $(this).addClass("scaleout"); 
         }, function() { 
         $(this).removeClass("scaleout"); 
         } 
        ); 
        }); 

       </script> 
      </body> 
     </html>

來源

2015-11-14 07:15:17 vel

移除事件處理程序 'IMG'，它的工作對我來說

<script> 
    $(document).ready(function(){ 
     $("#thumbnail").on({ 
      mouseenter: function() { 
       $(this).addClass("scaleout"); 
      }, 
      mouseleave:function() { 
       $(this).removeClass("scaleout"); 
      } 
     }); 
    }); 
</script>

來源

2015-11-14 07:15:32 azad

我試過相同的代碼，但不知道爲什麼它不工作時，我把我的CSS使用：懸停選擇器它的工作原理。我的圖像獲取呈現使用角度js框架 – virendrao

其工作對我來說 – azad

我試着直接標記仍然不工作 – virendrao

有很多方法可以做到這一點，一個解決方案是 -

$(document).ready(function(){ 
    $('#thumbnail').on('mouseenter', function (e) { 
     $(this).toggleClass('scaleout'); 
    }); 
});

這裏是另外一個 -

$("#thumbnail").mouseenter(function (e) { 
     $(this).toggleClass('scaleout'); 
    });

幾道 -

$("#thumbnail") 
    .mouseover(function() { 
    $(this).toggleClass('scaleout'); 
    }) 
    .mouseout(function() { 
    $(this).toggleClass('scaleout'); 
    });

的輸出結果相同，但不同的方法 -

$("#thumbnail") 
    .mouseenter(function() { 
    $(this).toggleClass('scaleout'); 
    }) 
    .mouseleave(function() { 
    $(this).toggleClass('scaleout'); 
    });

來源

2015-11-14 07:25:59

懸停在圖像不工作Javascript/JQuery

回答

相關問題