Body background color change on list item hover

Kirby 3 Solved ✅
1

I’m trying to get each li item to display its body color on hover. I have access to the body color of each li item with this code: <?= $subpage->color() ?>, but I’m unsure of how I can use the colors as I can’t add the php to the js or css.

I’ve got a working this css that shows a red background on hover, but nothing that can find the individual page colors.

li:hover:before {
  content: '';
  position: fixed;
  display: block;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: -1;
  background-color: red;
}

Seriously nooby questions, but any help much appreciated :blush:

2

Why can’t you add the php output to the js?

3

You can either put <?= $subpage->color() ?> in a class on each list item, or in a data attribute.

You could use an inline style, but you cant do hover states with that.

1 Like
4

Maybe inline js?

<a
href="#"
onMouseOver="this.style.color='<?= $subpage->backgroundColor() ?>'"
>
Text
</a>
5

If you are storing the color as a hex code, you should probably use a data attribute, since it might have a # in it, then style it this way…

[data-color="#000"] {
  background-color: #000;
}

Add this as an attribute on you list items…


<li data-color="<?= $subpage->color() ?>" >
6

Thanks Jimbo, can’t manage to get this working. This is what I’ve got:

  <ul class="menu">
    <?php foreach($page->children() as $subpage): ?>
      <li data-color="<?= $subpage->color() ?>">
        <a href="<?= $subpage->url() ?>">
          <?= html($subpage->title()) ?>
        </a>
      </li>
    <?php endforeach ?>
  </ul>

and the css

[data-color="#000"] {
  background-color: #000;
}

I managed to get each list item to have a background of it’s own color with the code below, but like you said I can’t do hover states with it.

<li style="background-color: <?= $subpage->color() ?>">
7

Hmmm perhaps it does not like # in the attribute, you could use php to swap the # for a word. Numbers are fine but a class cannot start with a number.

Also, did you adjust the css example to match the actual color?

8

But if you do it like this, it’s not very dynamic. Maybe better do it with JavaScript or a CSS variable in a style tag.

9

Ah okay. There are multiple colours, one for each subpage (10 in total), do I set multiple data-attributes?

10

Sry, I thought the subpage color should be the hover color.

11

Yes. If you are using SCSS you can keep it clean by putting the colors in a map and then looping through it.

12

What should be the hover colors?

13 
<ul class="menu">
    <?php foreach($page->children() as $subpage): ?>
      <li onmouseover="this.style.backgroundColor='<?= $subpage->color() ?>'">
        <a href="<?= $subpage->url() ?>">
          <?= html($subpage->title()) ?>
        </a>
      </li>
    <?php endforeach ?>
  </ul>
1 Like
14

Perfect! Thank you very much

1 Like
15

Keep in mind that this “quick & dirty” solution won’t work with JavaScript disabled.