title: jQuery hover for colorbox image collection overlay
body: <p>I recently came upon the requirement to use colorbox or
  similar jquery lightbox plugin as mouse over function 
  fired by jQuery hover event </p>
  
  <p>This seems like a good place to use $.colorbox() and pass the 
  collection as REL parameter, but I can’t get this to work.. </p>
  
  <p><a href="http://colorpowered.com/colorbox/" rel="nofollow">http://colorpowered.com/colorbox/</a></p>
  
  <p>.hover and colorbox does work when I pass <strong>href param</strong> .. 
  but only for one picture</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;ColorBox Examples&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
          a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
          h2{font-size:13px; margin:15px 0 0 0;}
      &lt;/style&gt;
      &lt;link media="screen" rel="stylesheet" href="colorbox.css" /&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="./jquery.colorbox.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function(){
  
          $("[rel='example3']").hover( 
              function () { 
                  $.colorbox({rel:"example3",width:"800",height:"800"}); 
                  },  
              function () { 
                  } 
              );
  
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;No Transition + fixed width and height (75% of screen size)&lt;/h2&gt;
  &lt;p&gt;&lt;a href="./content/ohoopee1.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee 1."&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="./content/ohoopee2.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee 2."&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;a href="./content/ohoopee3.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee 3."&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
  </code></pre>