Container link will disable some properties

Hi
When I assign a link for a container, “hover appearances” of buttons that are placed inside it will be disabled. In inspect of container I can see this property for link: z-index=99, but when I change it to another value, the problem will continue. How can I use both of these together: “container link” and “button hover appearance”?
Thanks!

Hi @arash,

To clarify, do you have a button link inside a Container Link? If so, this sort of structure is not allowed in HTML.

It’s not allowed to put links on top of one another. This will cause issues intrinsically in web development.

Hi @fernandoazarcon2 ,
Thanks for your comment.
No, the button inside the container hasn’t any link. It is placed only for visual effect. I should clarify that in Gutenberg page builder, hover appearances of button works correctly, but in output render, it doesn’t work!
Thanks

I see. Can you provide the link to the site in question for reference?

Hi @fernandoazarcon2
Happy 2023!
The following link is a prototype website for this problem. A container that has link and a button inside it without any link, but hover appearance doesn’t work!
Container with button inside
Thanks

Happy New Year!

Yes, the same HTML core concept applies. Since the Container Link is above the Button, all button hover behaviors directly added to the button are nullified.

This is an HTML core behavior. We can’t do anything about this.

What we can do is add the effect to the button once the link is hovered.

For instance, try adding this code through Appearance > Customize > Additional CSS:


.gb-container.gb-container-4a0da10d .gb-container-link:hover + .gb-inside-container .gb-button {
    background-color: #ff0000;
}

This code alters the background-color of the button once the container link is hovered.

You are right about HTML core behavior, but according to the code you said, hover appearance of button is depending on its parent, but I want it to depend only on itself.
Let me give an example of an official design of generatePress Libraries:
https://gpsites.co/dispatch
In this design, the button’s hover appearance (Read more) only will be activated when we hover on it not on its parent.

You’re right. Thank you for reminding me of that we can make it “float” higher than the Container link.

You can try this:

.gb-button-wrapper.gb-button-wrapper-91a89d4b > .gb-button {
    position: relative;
    z-index: 100;
}

You can also add custom classes to make your selectors more specific: Add Additional CSS Classes to Blocks – WordPress.com Support

1 Like

Thank you for following up and solving my problem.

You’re welcome @arash!

1 Like