Why does my java script work perfectly in jsFiddle but not in any browser?
<p>please help me! been stuck for very long. I coded the exact same thing in my html file but it is not working at all. </p>

<p>i inserted the javascript under the HEAD section.</p>

<p><a href="http://jsfiddle.net/CnUKW/26/" rel="nofollow">Here is my fiddle</a></p>

<p>The HTML:</p>

<pre><code>&lt;div id="content"&gt;

&lt;div id="colone"&gt;

     &lt;div id="introbox" class="test"&gt;
     &lt;/div&gt;


     &lt;div id="infobox" class="test"&gt;
     &lt;div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;"&gt;
    INFO
    &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;    

&lt;div id="coltwo"&gt;

     &lt;div id="aboutbox" class="test"&gt;
    &lt;div style="border-bottom:1px solid #666;width:250px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;"&gt;
    ABOUT
    &lt;/div&gt;
    &lt;/div&gt;


     &lt;div id="gallerybox" class="test"&gt;
     &lt;div style="border-bottom:1px solid #666;width:260px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;"&gt;
    GALLERY
    &lt;/div&gt;

     &lt;/div&gt;
&lt;/div&gt;    


&lt;div id="colthree"&gt;

     &lt;div id="contactbox" class="test"&gt;
     &lt;div style="border-bottom:1px solid #666;width:180px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;"&gt;
    CONTACT US
    &lt;/div&gt;

    &lt;/div&gt;


     &lt;div id="extrabox" class="test"&gt;
     &lt;div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;"&gt;
    EXTRAS
    &lt;/div&gt;

     &lt;/div&gt;
&lt;/div&gt;
     ​
</code></pre>

<p>The JavaScript:</p>

<pre><code>$(document).ready(function() {
    $(".test").hover(function() {
    $(".test").not($(this)).css({
        "opacity": 0.1
    });
}, function() {
    $(".test").css({
        "opacity": 1
    });
});
});​
</code></pre>
