I have a bug in my jquery outcome
<p>My website is <a href="http://www.grozav.com" rel="nofollow">http://www.grozav.com</a></p>

<p>At the portfolio part, you can see the div containing the category name (eg. Photomanipulation) is canceling the action of the thumbnail hover state, even though it is included in the same anchor tag.</p>

<p>Javascript code:</p>

<pre><code>function thumbnail(param1){
    $('#'+param1+'-thumb img').mouseover(function() {
        $('#'+param1+'-thumb .color').hide().stop().fadeTo(500,'1');
    })  
    $('#'+param1+'-thumb img').mouseout(function() {
        $('#'+param1+'-thumb .color').stop().fadeTo(500,'0');
    })                  
};

thumbnail('dubstep');
</code></pre>

<p>Thumbnail DIV structure:</p>

<pre><code>&lt;div class="thumb" id="dubstep-thumb" &gt;
    &lt;a class="ajax" href="gallery/dubstep.html"&gt;
        &lt;p class="work-type"&gt;PHOTOMANIPULATION&lt;/p&gt;
        &lt;img src="images/thumbs/dubstep-bwthumb.jpg" alt="" width="300" height="169"/&gt;
        &lt;img src="images/thumbs/dubstep-thumb.jpg" alt="" width="300" height="169" class="color"/&gt;
    &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>CSS, if it's of any use:</p>

<pre class="lang-css prettyprint-override"><code>.thumb {
    float:left;
    width:300px;
    height:169px;
    position:relative; 
    margin-right:10px;
    margin-top:10px;
    overflow:hidden;
    z-index:1;
}
.thumb img {
    position:absolute;
    width:300px;    
    height:169px;
}
.thumb .color {
    display:none;    
}
.work-type { 
    background:url('../images/transparent.png') repeat; 
    position:absolute; 
    z-index:1;
    width:288px; 
    height:20px; 
    margin-top:141px;
    margin-left:1px;
}
.work-type {
    font-family:arial; 
    color:#a0a0a0; 
    font-size:10px; 
    text-align:right; 
    padding-top:7px; 
    padding-right:10px;
}
</code></pre>

<p>Thank you in advance for the help!</p>
