Javascript jQuery选择器嵌套在几个div和PHP代码中

Javascript jQuery选择器嵌套在几个div和PHP代码中,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我试图在我的站点上的图像中添加jquery悬停效果,我希望图像在鼠标悬停时变为不透明,在鼠标悬停时变为完全不透明。我遇到的问题是,PHP正在我的页面上填充图像,我不知道使用什么选择器来获得我想要的效果 这是HTML <div id='gridcontainer'> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make p

我试图在我的站点上的图像中添加jquery悬停效果,我希望图像在鼠标悬停时变为不透明,在鼠标悬停时变为完全不透明。我遇到的问题是,PHP正在我的页面上填充图像,我不知道使用什么选择器来获得我想要的效果

这是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>


有很多方法可以做到这一点,你可以有两个不同不透明度的类,或者你可以使用jQuery中的
animate
功能


我使用toogling类制作了一个动画示例,动画示例位于

中,请尝试使用
$('.postimage img')
选择器。这会将您设置的任何所需效果应用于包装在
postimage
分区中的img标记。

$(“#gridcontainer img”)
?您将直接使用图像的类。就像$(“.alignnone”)选择器一样。如果这在所有图像中都是常见的。此外,您还需要使用“this”来处理特定的图像。否则它可能对所有人都有效。
<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>