title: jquery.hoverdir.js not loading
body: <p>I have a problem with a direction aware hower effect. On a test page is working fine, but when I'm embedding the thumbs into the big site is not working. Please assist! you can check it at <a href="http://www.psyhealth.ro/test/index.html" rel="nofollow">http://www.psyhealth.ro/test/index.html</a>.
  I;ve started from the code posted on : <a href="http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/" rel="nofollow">http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/</a></p>
  
  <p>here below you can see my actual code:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/patratele.css" /&gt;
      &lt;script src="js/modernizr.custom.97074.js"&gt;&lt;/script&gt;
      &lt;noscript&gt;&lt;link rel="stylesheet" type="text/css" href="css/noJS.css"/&gt;&lt;/noscript&gt;
  &lt;/head&gt;
  &lt;body&gt;
                          &lt;ul id="da-thumbs" class="da-thumbs"&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/7.jpg" /&gt;
                          &lt;div&gt;&lt;span&gt;text 1&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/9.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 2&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/10.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 3&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/11.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 4&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/12.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 5&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="h#"&gt;
                          &lt;img src="images/1.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 6&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/2.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 7&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="images/3.jpg" /&gt;
                      &lt;div&gt;&lt;span&gt;text 8&lt;/span&gt;&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.hoverdir.js"&gt;&lt;/script&gt;    
      &lt;script type="text/javascript"&gt;
          $(function() {
  
              $(' #da-thumbs &gt; li ').each( function() { $(this).hoverdir({
                  hoverDelay : 75
              }); } );
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>the same code works perfect in the standalone page, but in the big site it does not work.</p>