Site logo

Archived topic

Hover Link effect

5 replies · Started by David on November 16, 2020

Viewing posts 1–6 of 6

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

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;
}

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

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];
}

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

No problem. Glad to be of any help. :)

This archived topic is closed to new replies.