I want to use the hover link widget to link to blog posts. The blog posts will be listed with the title on the left and date posted on the right side of the desktop screen. The title and date will have different font sizes and styles. How can I change the font size, style and position of the text within one hover link text so that when the title is hovered over, it also changes the color of the data using the change color style?
Sorry. If you go to the 'Thoughts' tab on my website: https://jonahbernard.com/portfolio/ (this takes you to the 'Thoughts' tab). If you hover over 'Good Book' it has a link and changes color. I want the date on the right 'Jan 18 2023' to also change color and link with 'Good Book' if either of them is hovered over. However, I can't have them be the same widget right now because I want different font style and size for the date.
sorry, I don't see how this can be achieved from the widget. But I'm sure this can be done using some custom CSS. Lets say you have both Title and Date elements under one Elementor Section, then the css could be:
I want to use the hover link widget to link to blog posts. The blog posts will be listed with the title on the left and date posted on the right side of the desktop screen. The title and date will have different font sizes and styles. How can I change the font size, style and position of the text within one hover link text so that when the title is hovered over, it also changes the color of the data using the change color style?
Hi,
to be honest, I am not sure what exactly are you trying to achieve
Do you have some example of the final result that you want to achieve?
Regards,
Igor
Hi,
Sorry. If you go to the 'Thoughts' tab on my website: https://jonahbernard.com/portfolio/ (this takes you to the 'Thoughts' tab). If you hover over 'Good Book' it has a link and changes color. I want the date on the right 'Jan 18 2023' to also change color and link with 'Good Book' if either of them is hovered over. However, I can't have them be the same widget right now because I want different font style and size for the date.
Hi,
I will forward your ticket to the second level support, so they can proceed in helping you.
Thank you for your understanding!
Regards,
Igor
Hi, Jonah,
sorry, I don't see how this can be achieved from the widget. But I'm sure this can be done using some custom CSS. Lets say you have both Title and Date elements under one Elementor Section, then the css could be:
.section-name:hover .title-name{
color: yellow;
}
.section-name:hover .date-name{
color: red;
}
Just make sure you're using apropriate elements class names.
Let me know if you have questions.
Thank you
Hi,
Thank you for the help!
Is there a way to add this CSS to this widget because I have Elementor Pro Lite so I can't use custom CSS on Elementor.
Thank you!
Hi, Jonah,
you can try to add the CSS code inside HTML element in Elementor:
or you can add the code via some plugin like HFCM:
inside widget we can only add code that is relative to the widget, not its parent containers / sections.
Please let me know if you have questions.
Thank you,
Denys