Archived topic
Hover Link effect
5 replies · Started by David on November 16, 2020
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. :)