[Resolved] GB Headline Icon hover

Home Forums Support GB Headline Icon hover

  • This topic has 7 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1300292
    Mark

    Is there a way to make the headline icon active when the headline is a link? Right now only the text changes on hover. Can I get the text and the icon to change on hover using css?

    My work around is to add a button above the headline, and make the button active on hover so they are both active on hover, but they’re two different links, a h2 link beneath a button link. It works, but they are active independent of one another and I want the icon and the text to be active simultaneously. So I’m thinking the headline icon would be the best option.

    #1300490
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .gb-headline-wrapper:hover {
       color: blue;
    }

    The Headline and the SVG should inherit that color.

    If you want it to only apply to the Icon the try:

    .gb-headline-wrapper:hover .gb-icon svg {
       color: blue;
    }

    Note this will work with all built in icons.
    For it to apply to an imported SVG make sure your path fill="currentColor"

    eg.

    <svg aria-hidden="true" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313l-20 25a16 16 0 01-22.49 2.5l-67-49.72a40 40 0 01-15-31.23V112a16 16 0 0116-16h32a16 16 0 0116 16v144l58 42.5a16 16 0 012.49 22.5z"></path>
    </svg>
    #1300712
    Mark

    Thanks David

    I used the first one and it worked well for changing the color of the icon on hover, however the icon is not clickable. Only the text is clickable, so perhaps I’ll go back to the button.

    Is there a way to position the button text below the button?

    #1301225
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Not too sure what you mean by button text below the button? Are you wanting the button icon up above the text?

    Let me know 🙂

    #1301283
    Mark

    Yes. That’s correct.

    Icon Above
    text below

    Its a small thing, but I want both the icon and the text to be clickable, and both change at the same time when in hover state.

    If I use the Heading method I can stack the icon above the text, but only the text is clickable.

    The way I have it set up is, I’m using a button for the icon, and a heading for the text. Both are clickable, but on hover they change independent of one another. I want them to be one and the same and change together when either one is in hover.

    #1301680
    David
    Staff
    Customer Support

    Tricky one as the Icon sits outside of the anchor element.
    You can try this CSS which will make the entire headline container clickable:

    .gb-headline-wrapper {
    	position: relative;
    }
    .gb-headline-wrapper:hover {
    	color: blue;
    }
    .gb-headline-wrapper .gb-icon + .gb-headline a:before {
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    #1301882
    Mark

    Thanks David. Works perfectly. That’s exactly what I want. I knew it was the wrapper, but couldn’t figure out the selector. You really dug into that one. Much appreciated.

    #1301937
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.