PHP Hover должен добавить css, но только к этому элементу.

Question

У меня есть PHP, в котором перечислены карты.

Что я хочу: Когда пользователь наводит курсор на весь элемент, сделайте заголовок жирным шрифтом, стрелка go влево и увеличьте изображение на этом элементе наведения .

<div class="posti-class row">
    <?php
    $timeline_posts = new WP_Query( array( 'post_type'=> 'blablabla', 'showposts' => 4, 'post_status' => 'publish', 'ignore_sticky_posts' => 1, 'has_password' => false, 'portfolio_category' => 'case-studies') );
    $i = 0;
    while( $timeline_posts->have_posts() ): $timeline_posts->the_post();
    ?>
        <div class="col-md-3 col-sm-6 hoverpostzoom">
            <div class="portfolio-new-image-n">
                <?php if ( has_post_thumbnail() ) : ?>
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                        <?php the_post_thumbnail(); ?>
                    </a>

                    <div class="col-lg-10 col-md-10 col-sm-10" style="padding:0;">
                        <h4  class="title-ofpostc" style="color: #6796BF"><?php the_title(); ?></h4>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2" style="padding:0;">
                        <div class="arrow-ofpostc" style="font-size: 25px; color: #6796BF; font-weight: 600; text-align: right;"> &#x2192; </div>
                    </div>



                <?php endif; ?>
            </div>
        </div>
    <?php
    $i++;
    endwhile;
    ?>

Я пробовал следующее:

<script>
    jQuery(document).ready(function($){

        jQuery('.hoverpostzoom').hover(function () {
            jQuery('.title-ofpostc').addClass('titlehovereff');
            jQuery('.arrow-ofpostc').addClass('arrowhovereff');
        }, function () {
            jQuery('.title-ofpostc').removeClass('titlehovereff');
            jQuery('.arrow-ofpostc').removeClass('arrowhovereff');
        });
    });
</script>

<style>
    .titlehovereff {
        color: #6796BF;
        font-weight: bold;
    }
    .arrowhovereff{
        padding-right: 10px;
        transition: 0.5s all;
    }

</style>

Это хорошо, за исключением того, что ВСЕ стрелки go оставлены, а не только на Курчавый завис. Что мне здесь не хватает?

Примечание: я должен написать все это в тегах <script> и <style> в одном документе.

Answer 1

Это будет нацелено на каждый соответствующий элемент:

jQuery('.title-ofpostc')

Который, как вы уже нашли, это все они. Существует несколько способов нацеливания на указанный элемент c. Поскольку вы находитесь в контексте обработчика события, а целевые элементы находятся внутри элемента, который вызвал событие, вы можете использовать this в качестве контекста для сопоставления элементов. Что-то вроде:

jQuery('.title-ofpostc', jQuery(this)).addClass('tilehovereff');

Или, возможно, даже без переноса this в jQuery объект, я не уверен:

jQuery('.title-ofpostc', this).addClass('tilehovereff');

При использовании функции jQuery() для элементы соответствия, необязательный второй аргумент - это контекст или содержащий элемент, в котором можно найти соответствия.

В качестве альтернативы, вы также можете использовать методы обхода DOM для достижения цели. Например, начиная с текущего элемента, который вызвал событие, и используя .find() в нем. Что-то вроде:

jQuery(this).find('.title-ofpostc').addClass('tilehovereff');

Этот подход может быть полезен, когда вам нужно пройти вверх и вниз по DOM, например, найти элемент внутри одного из родительских элементов или что-то в этом роде, объединяя вызовы в такие вещи, как .closest() и .find() и другие подобные jQuery функции.