[Resolved] Hover Link effect

[David]

Hi everyone,
In this discussion on the WP website:
https://wordpress.org/support/topic/how-to-make-clickable-block/

Tom gives some CSS to achieve the request.
Which works great, but how would I enhance this to also add some hover effect – such as the background colour of the container changing on hover ?

TIA, Dave

[Elvin]

Hi,

Can you link us to the URL you’re currently working on? So we could check which selectors to apply the CSS to.

Which works great, but how would I enhance this to also add some hover effect – such as the background colour of the container changing on hover ?

For hover effects, we add :hover.

Example:

.gb-container.my-linked-container a:hover:before {
    background-color: red;
}

[David]

Thanks for getting back Elvin,
I tried that, but it only applies to the button I have within the container
Link below to see what I’m seeing – the 6 containers below the menu is what I’m working on.
(I just changed the color to be transparent!)

Regards, Dave

[Elvin]

Ah i see, thanks.

To clarify: You want the hover effect to apply to the whole container? If so, this should be the selector you’re using:

.gb-container.my-linked-container:hover {
    background-color: [add your color here];
}

[David]

Yes, sorry that is what I want, and it works perfectly…
Thanks so much!
Dave

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts