find images in div except certain child div
<p>Here is the fiddle:  <a href="http://jsfiddle.net/Xhqz9/" rel="nofollow">http://jsfiddle.net/Xhqz9/</a></p>

<p>I'm trying to find all images inside <code>&lt;div id="primary" /&gt;</code> except the images located inside any <code>&lt;div class="nohover" /&gt;</code>, which is always a child element, and do a hover effect on those images.</p>

<pre><code>&lt;div id="primary"&gt;
    &lt;img src="http://placehold.it/75x75"&gt;
    &lt;div class="nohover"&gt;
        &lt;img src="http://placehold.it/75x75"&gt;
    &lt;/div&gt;
    &lt;img src="http://placehold.it/75x75"&gt;
    &lt;div class="nohover"&gt;
        &lt;img src="http://placehold.it/75x75"&gt;
    &lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<p>jQuery:</p>

<pre><code>var postImgsRed = $('#primary').find('img');
postImgsRed.each(function() {
    $(this).css('border', '1px solid red');
});

var postImgsHover = $("#primary &gt; :not(.nohover)").find("img");
postImgsHover.each(function() {
    $(this).hover(function() {
        $(this).fadeOut(100);
        $(this).fadeIn(500);
    })
});​
</code></pre>

<p>My hover function is not executing correctly.  it won't do the effect on the 1st or 3rd image, as I want to do.  What am I doing wrong?</p>
