嵌套在多个DIV和PHP代码中的jQuery选择器

Question

I am trying to add a jquery hover effect to the images on my site, i would like the image to become opaque on mouseover, and back to full opacity on mouseout. The problem that i am encountering is that the images are being populated on my page by PHP and i do not know what selector to use to get the effect that i want.

Here is the HTML

<div id='gridcontainer'>

<?php
$counter = 1; //start counter
$grids = 2; //Grids per row
global $query_string; //Need this to make pagination work
 /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) :  while(have_posts()) :  the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
            <div class="griditemleft">
                <div class="postimage">
                        <?php the_content('Read the rest of this entry &raquo;'); ?>
                </div>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
                <div class="postimage">
                        <?php the_content('Read the rest of this entry &raquo;'); ?>
                </div>
            </div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
endif;
?>


</div>

AND THIS IS HOW THE HTML SHOWS UP IN FIREBUG (SHOWS THE IMAGE TAGS)

<div id="gridcontainer">
<div class="griditemleft">
<div class="postimage">
<p>
<a href="http://margierodrigues.com/taliecarterbeauty/wp-content/uploads/2014/12/lash_3.gif">
<img class="alignnone size-medium wp-image-108" width="300" height="300" alt="lash_3" src="http://margierodrigues.com/taliecarterbeauty/wp-content/uploads/2014/12/lash_3-300x300.gif">
</a>
</p>
</div>

can anyone offer any insight?

Answer 1

There are quite a few ways to do it, you can have two classes with different opacity or you could use the animate functionality in jQuery.

I made an example , using the toogling of class and the animate example is in the jquery animate docs

Answer 2

Try using the $('.postimage img') selector. This should apply any desired effects you set to the img tag wrapped in the postimage div.