Пользовательский цвет наведения на каждой записи в цикле - PullRequest
Новая
       22

Пользовательский цвет наведения на каждой записи в цикле

0 голосов
/ 10 августа 2011

Не удается найти логику для следующего сценария:

В цикле шесть постов, для каждого поста установлено значение цвета с настраиваемыми полями.Когда указатель мыши находится над одним из отрывков, он должен изменить фон отрывка на цвет, установленный с помощью настраиваемого поля.

Работает, но при наведении курсора на один из сообщений отображается скрытый цвет для всех сообщений, а не только для одного..

Можно ли как-то сохранить идентификаторы записей в переменных и затем передать эти переменные в функцию addClass / removeClass JQuery?

Спасибо.

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');

});

Очевидно, что приведенный выше код не будет работать из-за класса втроем.Есть ли способ получить переменную $ display в JQuery, а затем применить к ней немного CSS?

1 Ответ

0 голосов
/ 11 августа 2011

Хорошо, я понял это: из цикла (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');
});
});

Естьмного постов на странице с уникальным значением цвета, хранящимся в переменных отображения.Я хотел показать уникальные цвета в виде наложения с непрозрачностью над изображениями при наведении.В моем первом методе я использовал класс в качестве селектора, но при наведении курсора на изображение выявлялись все наложения.Вместо того чтобы использовать класс в качестве селектора, я обернул все это в div и нацелил первый элемент в этом div с помощью JQuery.В моем случае первый элемент внутри переноса - это div с уникальным цветом фона, который я хотел показать при наведении курсора на изображение.

Обратите внимание, что классы .wrap , .pic и .indextitle_seethrou имеют абсолютное позиционирование в моем CSS, .Indextitle_seethrou класс также имеет дисплей: нет свойство CSS.

Спасибо.

...