在網格中更改圖片鼠標懸停引導

Question

我有我的網格問題。我在這個網格中有網格（Bootstrap）是一些圖片，ai想要當某人在某人圖片上鼠標懸停時，圖片將與其他。我嘗試一些功能但不是工作。 這是我的網格：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-4"> 

      <img src="karta.png"/> 
     </div> 
     <div class="col-sm-4"> 
      <img src="karta.png"/> 
     </div> 

     <div class="col-sm-4"> 
      <img src="karta.png"/> 
     </div> 
    </div> 
</div> 

，我想改變電網這個圖片上mouseover有：

<div id="page_effect" style="display:none;"> 


<img src="karta1.png"/> 


<img src="karta1.png"/> 


<img src="karta1.png"/> 

</div> 

我嘗試這樣的事情，但不是工作：

$(document).ready(function(){ 
    $(".col-sm-4").mouseleave(function(){ 
     $("page_effect").attr()('src', 'karta1.png'); 
    }); 

    $(".col-sm-4").mouseover(function(){ 
     $("page_effect").attr("('src', 'karta1.png')"); 
    }); 
}); 

Answer 1

這是做到這一點的正確方法：

$(document).ready(function(){ 
    $(".col-sm-4").mouseover(function(){ 
     $(this).find("img").attr('src', 'karta1.png'); 
    }).mouseleave(function(){ 
     $(this).find("img").attr('src', 'karta.png'); 
    }); 
}); 

DEMO

瞭解更多關於attr()here。