Hover effect for container in Pro Header Builder

[raphaelz]

Hello guys,

I added two headline elements into one container in my header builder and gave him an CSS ID and class. I tried to address this container with global css to achieve a hover effect of both elements when hovering over one of them. To make things clear:

Hover over one of both elements creates a text shadow on logo and headline AND changes the text color to blue.
The text shadow works perfectly fine but the font-color does not. It is only working individually.
!important does not work as well…

What am I doing wrong. Do I need to work with my child theme / css files on ftp to change the code?
Thanks for your help!

Link

[basanta]

Hi There,

Thanks for writing in!

I can see the hover is not working. Can you please send us your login details so that we can have a look.
Also post the CSS that you have added.
Please send details in a secure note.

Thanks

[raphaelz]

I added my credentials for you. Thanks for your assistance.
I had different approaches within my CSS edits. Currently it is as following:

.inline_link:hover {
  
  color: #3C14E6 !important;
  text-shadow: 1px 1px 0px #DC1414 !important;
  transition: 0.3s;
  
}

[mldarshana]

Hi There @raphaelzydek

I see the issue here. You have assigned the class inline_link to your header bar container, but hover effect is firing when a user is hovering over the link. So you need to assign your CSS class to the link to correctly apply those changes. <a class="inline_link" href=""> My Link </a>.

Hope that helps.

[raphaelz]

Yes, I did this intentionally. I want to have the hover effect firing on both elements in the container simultaneously when the mouse is over one of these elements. Is this impossible?

I made a photoshop mockup to make my standpoint clear:

[alexander]

Hi Raphael,

Thanks for clarifying! What you’re looking for does take a bit of CSS since we’re targetting multiple elements. You are really close, we just need to make a small adjustment. Your inline_link class is setting the color property on the parent element but this color only applies to child elements that have no color declaration. Even the base level color for links is overriding it. Using !important will only apply to color on that parent element. To correct this, we need to target anchor elements within that parent. Give this code a try. Notice all I’ve changed is adding the a selector.

.inline_link:hover a { 
  color: #3C14E6 !important;
  text-shadow: 1px 1px 0px #DC1414 !important;
  transition: 0.3s; 
}

[raphaelz]

Hey @Alexander!
Thank you so much for helping me out! This worked perfectly! I will now look into css documentations before bothering you again.

Have a great week!
R

[rad]

You’re most welcome!