jQuery - होवर

Question

पर छवि स्रोत बदलें मूल रूप से मैं होवर पर -active.png जोड़ने के लिए छवि src को बदलना चाहता हूं।

तो fb.png होवर पर fb-active.png बन जाएगा, और fb.png जब यह होवर नहीं हो रहा है।

मैं भी यकीन है कि मैं गलत क्या कर रहा हूँ इसलिए मैं अपने कोड पोस्ट करेंगे अब तक नहीं कर रहा हूँ: -

एचटीएमएल

 <div id="main-contact" class="right"> 

      <div id="main-social"> 

       <a href="#!"><img class="img-social" alt="Company - Facebook" class="left" src="images/fb.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - Twitter" class="left" src="images/twitter.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - LinkedIn" class="left" src="images/linkedin.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - Word Press" class="left" src="images/wordpress.png" /></a>    

      </div> 

     </div> 

jQuery

$(document).ready(function() { 

$(function(){ 
    var regexactive = /-active\..*$/; 

    var ct = $('#main-social'); 
    var imgs = $('.img-social img', ct); 

    function activateImage(imgs){ 
     imgs.each(function(){ 
      var img = $(this); 
      var src = img.attr('src'); 
      if(!regexactive.test(src)){ 
       img.attr('src', src.replace('.png', '-active.png')) 
      } 
     }); 
    } 

    ct.on('hover', '.img-social', function(){ 


     var img = $('.img-social img'); 
     activateImage(img); 
    }); 
}); 

}); 

Answer 1

यह केवल सीएसएस के साथ जावास्क्रिप्ट के बिना किया जा सकता है। इस तरह:

फेसबुक, tw या ट्विटर आदि के लिए fb जैसे आइकन के लिए विभिन्न कक्षाएं दें।

HTML:

<div id="main-social">  
    <a href="#!"><span class="img-social fb left" title="Company - Facebook"></span></a> 
    <a href="#!"><span class="img-social tw left" title="Company - Twitter"></span></a> 
    <a href="#!"><span class="img-social ln left" title="Company - LinkedIn"></span></a> 
    <a href="#!"><span class="img-social wp left" title="Company - Word Press"></span></a> 
</div> 

सीएसएस:

.img-social{display:inline-block;height:20px;width:20px;} 
.fb{background:url("images/fb.png");} 
.fb:hover{background:url("images/fb-active.png");} 
.tw{background:url("images/twitter.png");} 
.tw:hover{background:url("images/twitter-active.png");} 
.ln{background:url("images/linkedin.png");} 
.ln:hover{background:url("images/linkedin-active.png");} 
.wp{background:url("images/wordpress.png");} 
.wp:hover{background:url("images/wordpress-active.png");} 

आप दक्षता के लिए स्प्राइट का उपयोग कर सकते हैं।

Answer 2

यदि आप पुराने ब्राउज़र के साथ अनुपालन करने की आवश्यकता नहीं है तो आप इसे केवल सीएसएस में कर सकते हैं।

$(".img-social").hover(function(){ 
    $(this).attr("src", function(index, attr){ 
     return attr.replace(".png", "-active.png"); 
    }); 
}, function(){ 
    $(this).attr("src", function(index, attr){ 
     return attr.replace("-active.png", ".png"); 
    }); 
}); 

Answer 3

ऐसा करने के तरीकों में से लोड नहीं है:

jQuery में यह ऐसा करने के लिए

, तो आप कुछ इस तरह की कोशिश कर सकते हैं। सबसे सरल बात यह है कि दो राज्यों को एक ही छवि में रखना है और फिर होवर पर पृष्ठभूमि स्थिति बदलना है। इस तरह होवर छवि को पहले से ही लोड होने के लिए कोई अतिरिक्त प्रतीक्षा नहीं है।

<div id="main-social"> 
    <a href="#!" alt="Company - Facebook" class="left fb">facebook</a> 
    <a href="#!" alt="Company - Twitter" class="left tw">twitter</a> 
    <a href="#!" alt="Company - LinkedIn" class="left li">linkedin</a> 
    <a href="#!" alt="Company - Word Press" class="left wp">Wordpress</a>    
</div> 

सीएसएस

#main-social a { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    text-indent:-1000px; 
    overflow:hidden; 
    background-position: left top; 
} 
#main-social a.fb { 
    background-image: url('fb.png'); 
} 
#main-social a.tw { 
    background-image: url('tw.png'); 
} 
#main-social a.li { 
    background-image: url('li.png'); 
} 
#main-social a.wp { 
    background-image: url('wp.png'); 
} 
#main-social a:hover, #main-social a.active { 
    background-position: left bottom!important; 
} 

Demo JSFiddle

Answer 4

आप mouseenter, mouseleave कार्यों का उपयोग कर सकते हैं।

<a href="#" class="hover-change-img"><img src="sample1.png" class="img-responsive"></a> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script> 

    $("document").ready(function(){ 
     $(".hover-change-img img").mouseenter(function(){  
      $(this).attr('src','sample2.png');  
     });  
     $(".hover-change-img img").mouseleave(function(){  
      $(this).attr('src','sample1.png');  
     }); 
    }); 

</script> 

Answer 5

मैं इस स्क्रिप्ट का उपयोग करता हूं .. उपरोक्त स्क्रिप्ट पर आधार ... यह केवल सक्रिय और मूल छवि के बीच स्विच करता है।

$("document").ready(function(){ 
     $(".my_image").mouseenter(function(){  
      $(this).attr('src',function(index, attr){ 
     return attr.replace(".png", "-active.png"); 
    });  
     });  
     $(".my_image").mouseleave(function(){  
      $(this).attr('src',function(index, attr){ 
     return attr.replace("-active.png",".png");});  
     }); 
    });