嵌套在幾個DIV和PHP代碼中的jQuery選擇器

我想向我的網站上的圖像添加jquery懸停效果，我希望圖像在mouseover上變得不透明，並在mouseout上返回到完全不透明狀態。我遇到的問題是圖像正在我的頁面上由PHP填充，我不知道用什麼選擇器來獲得我想要的效果。嵌套在幾個DIV和PHP代碼中的jQuery選擇器

下面是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>

這該是多麼的HTML顯示出來的螢火（顯示圖像標記）

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

任何人都可以提供任何見解？

來源

2014-12-11 Margie Rodrigues

'$（'＃gridcontainer img'）'？ – 2014-12-11 04:39:11

您將直接使用圖像的類。就像$（「。alignnone」）選擇器。如果這在所有圖像中都很常見。你也需要使用「this」來處理特定的圖像。否則，它可能是所有人的工作。 – Lakhan 2014-12-11 05:19:11

有很多方法可以做到這一點，你可以有兩個具有不同透明度的類，或者你可以在jQuery中使用animate的功能。

我由example，使用類的toogling和動畫例子是在jquery animate docs

來源

2014-12-11 04:42:01 argentum47

嘗試使用$('.postimage img')選擇器。這應該應用您設置爲包裝在postimage div中的img標籤的任何所需效果。

來源

2014-12-11 04:43:52

嵌套在幾個DIV和PHP代碼中的jQuery選擇器

回答

相關問題