Headline element icon and text colour change on hover

[StuartTPhotog]

I am using a headline element and want to know how I can make both the icon and text of the element change colour on hover. I have managed to isolate the two elements with custom css and they change individually. Is there a way to make them both change simultaneously no matter which element is hovered over. The parent class is x-text-content if that helps. I am on a development platform so sharing login details could be a challenge. Here is the css I have so far:

/* TOPBAR TRANSFORM ON HOVER */

.mbc-7.x-text .x-graphic-icon {
font-size: 1.25em;
width: 2em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #a7da77;
border-right-color: #a7da77;
border-bottom-color: #a7da77;
border-left-color: #a7da77;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
height: 2em;
line-height: 2em;
color: #a7da77;
}

.mbc-7.x-text:hover .x-graphic-icon:hover {
font-size: 1.25em;
width: 2em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #fbcd69 !important;
border-right-color: #fbcd69 !important;
border-bottom-color: #fbcd69 !important;
border-left-color: #fbcd69 !important;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
height: 2em;
line-height: 2em;
color: #fbcd69 !important;
}

[prakash_s]

Hello @StuartTPhotog,

Thanks for writing to us.

I would suggest you add a DIV element, inside the DIV element you need to add the Headline element.

Now go to the DIV element —>Customize —>Element CSS

$el.x-div:hover .x-text .x-text-content-text-primary, $el.x-div:hover .x-text .x-graphic-icon {
    color: #fff;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[StuartTPhotog]

Done and dusted - thanks for your help. I almost got there on my own!! Was thinking about a Div but didn’t try it. Thanks a stack for your help.

[prakash_s]

Hello @StuartTPhotog,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks