Hover activates color field in the back

[ich]

Hello,
is there a way to define an area in mouse-off, when one is hover over it, in the back a color-field appears ?
To better explain what I mean, you may want to check the following website I found https://charmingplaces.de/reiseziele/

When you hove over the small-pictures (not the banner) and the text, a color-field in the back appears.
This happens, no matter whether a link is set in this area or not.

I tried with pop-up layer, but it appears on-top for sure and not in the back. I could copy-exact the entire objects in the pop-up layer and add the colorfield, but this means more laoding work for the page.

Ciao,
ICH

[Acorn]

ich, try this: CSS - Hover under.xar

Acorn

[ich]

ich, try this: CSS - Hover under.xar

Acorn

THX, I will try it and let U know

[ich]

THX, I will try it and let U know

It works perfectly.
THX !!!

[ich]

Hello Acorn,
I come back to this topic, with the following obseravtion.
Your example works in such a way that as soon as you hover over the area, the colored background appears. But that only works if the hover area is a link. As soon as no link is stored, the colored background does not appear even when hovering. It's different in the original example website, there the colored background always appears as soon as you hover over, regardless of whether a link is stored or not.
Why is this an finer solution?
One could use a "fake link" everywhere as an activator for the color field.
The problem with this is that the cursor changes shape when you hover over a link, implying a possible action for the viewer there. If the whole field is a link, the cursor is always a pointer.
The original website https://charmingplaces.de/reiseziele/shows the colored background field always once you hover, regardless of whether you have stored a link or no link. Take a look at the example page and hover over the text, it is not linked, the mouse remains original and the color field still appears. So I'm wondering, is it possible to refine your solution to that effect?

THX, ICH

[Acorn]

ich, invoking the MouseOver layer objects requires a link. You can use a "fake link". I call mine dummy links as they do nothing other than add an a <tag> into the design, allowing the MouseOver to show. Xara uses this approach in a lot of places. I set mine to be 'javascript: ;', the extra space tells me I did it and not Xara.

You original example site uses tons of JavaScript o handle all this but is is excessive.

I have managed to deliver what you ask for in two lines of CSS:

<style>
.underlay { z-index: -1; }
.default, .underlay { cursor: default; }
</style>

You need to add in a couple of ClassNames (underlay, default) and dummy links where real ones are not used.

CSS - Hover under - enhanced.xar

Acorn

[ich]

Thank you very much.
Got it and implemented it.

ICH

[Initiostar]

@Acorn,

Many thanks for the idea; I tried it out and it works well > https://initiostar.co.uk/demo/Underlay/

You could build a template gallery with this idea, much the same as the original OP's reference site.

[Acorn]

@Acorn,
Many thanks for the idea; I tried it out and it works well > https://initiostar.co.uk/demo/Underlay/
You could build a template gallery with this idea, much the same as the original OP's reference site.

Gary, thank you for promoting it.

Since then, I have rebuilt the mechanism so that the object underneath is actually now underneath. All the items on top has a pass-through effect - the pointer fails to trigger on moving over them.
The object underneath is then triggered to show itself.

The original was messy for movements between top objects and you could get a quick fade-in-out, which annoyed me.
This approach is rock steady.

The problem then is <a> Tags (Links, pop-ups, Highslide) cannot be triggered.
The simplest is to remove the 'pass-through-' ClassName so the hover disappears.
I have included a specific <a> Tag for text Links so the hover is forced off for these. It is a smart way to show something has changed.

It is more versatile and does not rely too much on Xara coding.

CSS - Pass-through Hover.xar

Acorn

[Egg Bramhill]

Testing that on FF shows no page content Acorn. All okay on other browsers.