Add hover effects to icons in headline

[Ben]

I keep reading that there is an “interactions” controls for headlines. However, I cannot see any. I wish to be able to either swap the primary icon for a secondary icon (no control? ). Or at minimum, change the background and graphic colors on hover.

Any ideas?

here is my page: http://18.209.43.156/home

[friech]

Hi Ben,

Thank you for writing in, where did you read it? Sorry Headline element has no “Interaction” option. You can use the following custom CSS instead.

$el.x-text:hover .x-graphic-icon {
	color: white;
	border-color: red;
	background-color: red;
}

Feel free to change those color values, you can add that on the Element CSS area of your Headline

Features - Element CSS

Hope it helps,
Cheers!

[Ben]

Hi, thanks for that. It appears under the description of elements under “headlines”. It is in the knowledge base and comes up when searching in the forum as well.

[Ben]

@friech

$el.x-text:hover .x-graphic-icon {
color: white;
border-color: red;
background-color: red;
}

What is the easiest way to turn this into a class?
I added .hover-graphic to the css. However, it doesn’t work. How do I avoid the needing the $el selector? Do I have to drill down using the Google Chrome developer tool to get the full list of selectors?

.hover-graphic .x-text:hover .x-graphic-icon {
	color: white;
	border-color: rgb(41,128,185);
	background-color: rgb(41,128,185);
}

[friech]

Hi Ben,

Thanks for the heads up about “Interactions” in headline documentation, we’ll check about that.

To turn the CSS code provided into CLASS, please update the code to this and add it to Theme Options > CSS

.hover-graphic:hover .x-graphic-icon {
	color: white;
	border-color: red;
	background-color: red;
}

Then apply the Class hover-graphic to your headline element.

Cheers!