首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >嵌套在几个DIVs和jQuery代码中的PHP选择器

嵌套在几个DIVs和jQuery代码中的PHP选择器
EN

Stack Overflow用户
提问于 2014-12-11 12:35:40
回答 2查看 48关注 0票数 1

我试图添加一个jquery悬停效果在我的网站上的图像,我希望图像变得不透明的鼠标经过,并回到完全不透明的鼠标输出。我遇到的问题是,图像是由PHP填充在我的页面上,我不知道使用什么选择器来获得我想要的效果。

这是HTML

代码语言:javascript
复制
<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在FIREBUG中的显示方式(显示图像标记)

代码语言:javascript
复制
<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>

有没有人能提供一些见解?

EN

回答 2

Stack Overflow用户

发布于 2014-12-11 12:42:01

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

我使用类的toogling制作了一个example,动画示例在jquery animate docs

票数 0
EN

Stack Overflow用户

发布于 2014-12-11 12:43:53

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27415431

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档