在网格中更改图片鼠标悬停引导

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。