自定义颜色悬停在循环中的每个帖子上答案

【问题标题】：Custom color hover on each posts in loop自定义颜色悬停在循环中的每个帖子上
【发布时间】：2011-08-10 12:07:09
【问题描述】：

找不到以下场景的逻辑：

一个循环中有六个帖子，每个帖子都有一个带有自定义字段的颜色值。当鼠标悬停在某个帖子的摘录上时，它应该将摘录的背景更改为使用自定义字段设置的颜色。

它正在工作，但将鼠标悬停在一个帖子上会显示每个帖子的隐藏颜色，而不仅仅是一个。

有什么方法可以将帖子 ID 存储在变量中，然后将该变量传递给 JQuery addClass/removeClass 函数？

谢谢。

HTML：

<?php if( $2nd_query->have_posts() ) : ?>
    <?php while( $2nd_query->have_posts() ) : $2nd_query->the_post(); ?>
            <?php $display = get_field('color_setting');?>
            <div class="threesome">
            <div id="<?php echo $display ?>" class="indextitle_seethrou">
                <h2 class="indextitle"><a href="<?php the_permalink() ?>" title=""><?php the_title(); ?></a></h2>
            </div>  

                <?php
                if ( has_post_thumbnail() ) {
                the_post_thumbnail('featured_thumb');
                } else {
                } ?>
        </div>
    <?php endwhile; ?>
    <?php else : ?>

然后我有这个 Jquery：

$('.threesome').hover(function() {
$('.indextitle_seethrou').stop(true, true).fadeIn('fast');
            }, function() {
$('.indextitle_seethrou').stop(true, true).fadeOut('fast');

});

显然，由于三人组课程，上述代码将无法工作。有什么方法可以在 JQuery 中获取 $display var，然后对其应用一些 css 吗？

【问题讨论】：

一些代码会有所帮助。请发布一些示例代码。

标签： jquery wordpress hover addclass removeclass

【解决方案1】：

好的，我想通了：从循环（具有图像和具有绝对位置的不可见 div 的 div）：

<div class="wrap">
<div id="<?php echo $display ?>" class="indextitle_seethrou">
</div>
<div class="pic">
    <?php
    if ( has_post_thumbnail() ) {
        the_post_thumbnail('featured_thumb');
    } else {
    } ?>
</div>
</div><!--wrap ends -->

JQuery:

$(document).ready(function()
{
 $(".wrap").mouseover(function ()
{  
 $(this).children('div:first').stop(true, true).fadeIn('fast');
});
 $(".wrap").mouseout(function ()
{ 
 $(this).children('div:first').stop(true, true).fadeOut('fast');
});
});

页面上有许多帖子，每个帖子都有其独特的颜色值存储在 $display 变量中。我想将独特的颜色显示为悬停时图像的不透明度叠加。在我的第一个方法中，我使用一个类作为选择器，但将鼠标悬停在图像上会显示所有叠加层。我没有使用类作为选择器，而是将整个内容包装在一个 div 中，并使用 JQuery 定位该 div 中的第一个元素。在我的情况下，包装内的第一个元素是具有独特背景颜色的 div，我想在将鼠标悬停在图像上时显示。

注意 .wrap 、 .pic 和 .indextitle_seethrou 类在我的 CSS 中具有绝对定位。 indextitle_seethrou 类还有一个 display:none CSS 属性。

谢谢。

【讨论】：