title: applying hover effect to 2 divs
body: <p>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</p>
  
  <pre><code>html:        
  &lt;div class="googleplus"&gt;  
      &lt;div class="googlehider"&gt;  
          &lt;g:plusone annotation="none"&gt;&lt;/g:plusone&gt;  
  
          &lt;!-- Place this render call where appropriate --&gt;  
          &lt;script type="text/javascript"&gt;  
            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);  
            })();  
          &lt;/script&gt;  
      &lt;/div&gt;  
      &lt;img src="images/googleplus.png" class="mygoogle" /&gt;  
  &lt;/div&gt;  
  
  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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter:alpha(opacity=0);  
  }  
  .mygoogle {  
  position:absolute;  
  top:0;  
  left:0;  
  z-index:2;  
  margin-left:6px;  
  } 
  </code></pre>
  
  <p>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 <a href="http://api.jquery.com/hover/" rel="nofollow">http://api.jquery.com/hover/</a> 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</p>
  
  <pre><code>&lt;script&gt;
  $('div.facebookhider').hover(
  function () {
  $('div.myfacebook').addClass(".facebookhover"); 
  }, 
  function () {
  $('div.myfacebook').removeClass(".facebookhover"); 
  }
  );
  &lt;/script&gt;
  
  &lt;div class="facebookshare"&gt;
  &lt;!-- Facebook --&gt;
  &lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
  
      &lt;div class="facebookhider"&gt;  
          &lt;div class="fb-like" data-href="mywebsite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"&gt;&lt;/div&gt; 
      &lt;/div&gt;
      &lt;div class="myfacebook"&gt;&lt;li class="facebook"&gt;&lt;a&gt;Facebook&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>