title: html5 video hover change opacity of another element
body: <p>So I've got a page here : <a href="http://www.ruffcuts.com.sg/work/bosch.htm" rel="nofollow">http://www.ruffcuts.com.sg/work/bosch.htm</a> among some other pages.</p>
  
  <p>I'm looking to hover over the video element and then change the opacity of the grass image in front(id=plax-sphere-52 src=homehead6.png) so that the controls to the player can be seen.</p>
  
  <p>But somehow it doesn't work! I've tried </p>
  
  <pre><code>$('#videocontain').mouseover(function() {
  $('img#plax-sphere-52').css('opacity', '0.6');
  });
  $('#videocontain').mouseout(function() {
  $('img#plax-sphere-52').css('opacity', '1');
  });
  </code></pre>
  
  <p>And other similar codings, but it just doesn't work.</p>
  
  <p>Could there be a conflict somewhere or I'm just simply coding it all wrong? Using <a href="http://videojs.com/" rel="nofollow">http://videojs.com/</a> by the way.</p>