Streaming live at 10am (PST)

Alter Backgroundcolor of a Collection Item

Hi
I’m testing Webflow to see if it fits my needs.

The main goal is to achieve something like this: erlin.ch (go to “Angebot”)
Do you think this is possible with Webflow?

There is an interaction between the SVG-Graphic (the house) and the pricelist.
And users can filter the pricelist for specific arguments.

My first banal question on this journey is:
I made a Collection for the price and a Collection List Wrapper to display the data in a Table.
How can I alternate the Backgroundcolor of each row of the Table?

Kind regards
Alain


Here is my site Read-Only: https://my-easy-test-project.webflow.io/

Post Edit: I had not visited the site when I answered.

The site you provided as a reference has a background color change on hover. That can be done right in the designer.

-------------- Original Answer --------------------

Assumption: How can I alternate the Backgroundcolor of each row of the Table?

You could do that with custom code targeting the collection list item wrapper.

Using JQuery it would look like this:

$(".collection-list-item.w-dyn-item:odd").css("background-color","#eaeaea");

I would give the wrapper a custom class and use that instead of the default created by webflow that I targeted here.

You would place that code inside a JQuery doc ready function inside of a script tag in the template’s before body close section.

Using custom code -> https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

Thanks for the tip.

Unfortunally I’m testing on the free Version of Weblow which does not allow custom code.

No need for custom code for hover state changes.

I do not mean the hover state.
I mean for example that the first row is white, the second is blue, the third is white again and fourth blue again and so on.
I guess that is what your first codesnipet does, right?

That is what I wrote the code for, alternating row colors.

Thanks again. Alterning the background-color of a row works now.

The journey goes on:
How can I interact with the SVG-Elements of the houses?
When I hover a row of the table then the corresponding item of the housegraphic shoud be hightlighted.
How can I do that?

Here is some information on the topic.

Thanks.
Now I can change the fill-color of an SVG-Element when hovering it.

But how can I change the fill-color of specific SVG-Element (it has an id) when hovering a specific table row?