Hi I'm tearing my hair out right now, I found this script online which enables me to use my own google+ button instead of their ugly one\[code\]html: <div class="googleplus"> <div class="googlehider"> <g
lusone annotation="none"></glusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> window.___gcfg = {lang: 'en-GB'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <img src="http://stackoverflow.com/questions/10823236/images/googleplus.png" class="mygoogle" /> </div> css:.googleplus { position:relative; /* - use this to position your share icon on your page - */ } .googlehider { opacity:0; height:30px; width:30px; position:absolute; top:0; left:0; z-index:3; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); } .mygoogle { position:absolute; top:0; left:0; z-index:2; margin-left:6px; } \[/code\]This is fine if you have a static image but mine has a mouseover effect so I have tried to implement the following from this example http://api.jquery.com/hover/ to enable multiple hover effects in multiple divs which isn't working - what am I doing wrong? I mention facebook below as I'm trying to implement on google+ and facebook buttons\[code\]<script>$('div.facebookhider').hover(function () {$('div.myfacebook').addClass(".facebookhover"); }, function () {$('div.myfacebook').removeClass(".facebookhover"); });</script><div class="facebookshare"><!-- Facebook --><div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "http://stackoverflow.com//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script> <div class="facebookhider"> <div class="fb-like" data-href="http://stackoverflow.com/questions/10823236/mywebsite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div> </div> <div class="myfacebook"><li class="facebook"><a>Facebook</a></li></div></div>\[/code\]
lusone annotation="none"></glusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> window.___gcfg = {lang: 'en-GB'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <img src="http://stackoverflow.com/questions/10823236/images/googleplus.png" class="mygoogle" /> </div> css:.googleplus { position:relative; /* - use this to position your share icon on your page - */ } .googlehider { opacity:0; height:30px; width:30px; position:absolute; top:0; left:0; z-index:3; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); } .mygoogle { position:absolute; top:0; left:0; z-index:2; margin-left:6px; } \[/code\]This is fine if you have a static image but mine has a mouseover effect so I have tried to implement the following from this example http://api.jquery.com/hover/ to enable multiple hover effects in multiple divs which isn't working - what am I doing wrong? I mention facebook below as I'm trying to implement on google+ and facebook buttons\[code\]<script>$('div.facebookhider').hover(function () {$('div.myfacebook').addClass(".facebookhover"); }, function () {$('div.myfacebook').removeClass(".facebookhover"); });</script><div class="facebookshare"><!-- Facebook --><div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "http://stackoverflow.com//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script> <div class="facebookhider"> <div class="fb-like" data-href="http://stackoverflow.com/questions/10823236/mywebsite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div> </div> <div class="myfacebook"><li class="facebook"><a>Facebook</a></li></div></div>\[/code\]