0

I have the following loop in WordPress:

    <div class="container">
    <?php

    $news = array(
        'post_type' => 'post',
        'category_name' => 'angebote',
        'order' => 'ASC',
        'posts_per_page' => -1
    );


    $wp_query = new WP_Query($news);
    if (have_posts()) : while (have_posts()) :
        the_post(); ?>

        <div class="main-columns">
            <div class="card-content">
                <div class="main-content liste"
                     style="background-image: url(<?php the_field('background-image'); ?>
                             )">
                    <h2><?php the_title(); ?></h2>
                    <div class="row"><?php the_content(); ?></div>
                    <div class="row content-button">
                        <a href="<?php the_permalink(); ?>">
                            <p>MEHR</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .card-container .main-content:hover {
                background: <?php echo get_field('background-farbe' ); ?>;
                background-blend-mode: multiply;
            }
        </style>

    <?php var_dump($postid); ?>
    <?php endwhile; ?>

    <?php endif; ?>
    <?php wp_reset_query();
    ?>


</div>

As can be seen, I have the following CSS, what it does is add a color assigned to each post with ACF.

     <style>
        .card-container .main-content:hover {
            background: <?php the_field('background-farbe' ); ?>;
            background-blend-mode: multiply;
        }
    </style>

The problem is that I only get the color of the first post on all. Could someone help me solve the problem?, why do not I see it

0

Well, your problem lies in your CSS code.

    .card-container .main-content:hover {
        background: <?php the_field('background-farbe' ); ?>;
        background-blend-mode: multiply;
    }

It uses class only, so it will be applied to every element with that class. Multiplying the same code with different colors won't change anything - only one such rule will be active.

So how to solve this?

You have to assign unique identifiers to your posts:

<div class="container">
    <?php
        $news = array(
            'post_type' => 'post',
            'category_name' => 'angebote',
            'order' => 'ASC',
            'posts_per_page' => -1
        );

        $wp_query = new WP_Query($news);
        while (have_posts()) :
            the_post();
    ?>
    <div class="main-columns">
        <div class="card-content" id="card-<?php echo esc_attr( get_the_ID() ); ?>">
            <div class="main-content liste"
                 style="background-image: url(<?php the_field('background-image'); ?>
                         )">
                <h2><?php the_title(); ?></h2>
                <div class="row"><?php the_content(); ?></div>
                <div class="row content-button">
                    <a href="<?php the_permalink(); ?>">
                        <p>MEHR</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <style>
        #card-<?php echo esc_attr( get_the_ID() ); ?> .main-content:hover {
            background: <?php echo get_field('background-farbe' ); ?>;
            background-blend-mode: multiply;
        }
    </style>
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</div>

PS. You don't need any if statements in your loop, because you don't do anything outside while loop ;)

  • Oh!! ,Thank you so much, You are right with the loop, at the moment I am starting with web development, and I am still learning many things. – Dario B. Oct 31 '18 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.