Question

How to style the elements dynamic in iteration

In test.phtml page

<?php foreach($tests => $test) { ?>
    <li class="<?php echo $test['class'] ?>">
    <a href="#" title="">
        Test Instance
    </a>
    <style type="text/css">
        li.<?php echo $test['class'] ?> a:hover {
        color: <?php echo $test['color'] ?>;
        background-color: <?php echo $test['bgColor'] ?>;
        }
    </style>
    </li>
<?php } ?>

Style tags are coming in page.

<li class="third-item">
    <a href="#" title="">
        Test Instance
    </a>
    <style type="text/css">
        li.third-item a:hover {
        color: #498995;
        background-color: #dbe7ea;
        }
    </style>
</li>

But, these style have no effect in webpage.

Please help me to solve this problem…

Answer 1

You can use inline style tag like this.

<li style="color:<?php echo $test['color']; ?>;background-color: <?php echo $test['bgColor'] ?>;"><a>Test</a></li>

I have modify your code check it.

 <?php foreach($tests => $test) { ?>
 <style type="text/css">
            li.<?php echo $test['class'] ?> a:hover {
            color: <?php echo $test['color'] ?>;
            background-color: <?php echo $test['bgColor'] ?>;
            }
        </style>
        <li class="<?php echo $test['class'] ?>">
        <a href="#" title="">
            Test Instance
        </a>
        </li>
    <?php } ?>