If we’re to do this via CSS, it would require us to set the hover state to the row/column group. I was able to achieve it via jQuery though which you can try below. Simply add an extra class hovered to your Icon and Text Editor modules, and place the code under Appearance > Customize > Code > JS Code.
jQuery(document).ready(function() {
jQuery('.hovered i, .hovered a').hover(function() {
jQuery('.hovered i, .hovered a').css('color','blue');
}, function() {
jQuery('.hovered i, .hovered a').css('color','black');
});
});
So I copied that code into appearance > customize etc. I also added “hovered” to the class ID for each icon and text.
First, let me clarify what I have in different way and also I’m looking for
Icon 1 Icon 2a Icon 2b Icon 2c (all done via “Icon group”)
Text 1 Text 2
Icon 1 and text 1 are linked to the same web page
Icon 2a-c (“Icon Group”) and Text 2 are linked to the same page, but this page is different than the page Icon 1 and Text 1 are linked to.
I want it so that each time someone hovers over Icon 1 or Text 1, both Icon 1 and text 1 “highlight”… I do not want Icon 2a-c or Text 2 to be highlighted when either Icon 1 or Text 1 is hovered over.
Also, in the second link / set of icons and text, I want it so that if an individual icon within the icon group is hovered over, the other icons highlight as well as text 2… IE: If Icon 2b is hovered over, 2a, 2b, 2c and Text 2 all highlight in the same color … In this case, Text 1 and Icon 1 would not highlight.
3 issues:
When I hover over any of the icons (icon 1, 2a, 2b, or 2c), both text 1 and text 2 highlight along with that icon… and the texts highlight in blue, not orange.
When I hover over text 1 or text 2, both texts highlight while no icons highlight. The texts also highlight in blue vs. orange.
When I hover over icon 2a, 2b, or 2c, the other “2” icons don’t highlight at all (but, as mentioned in issue 1, both text 1 and text 2 highlight… in blue, unfortunately… I’d like it so only text 2 highlights when any of the “2” icons are hovered over.
This isn’t possible with the IconGroup Module, unless like Ben suggested you use custom code.
I think the best course of action is for you to use to use the HTML module and use the HTML code to display your text/icons.
You can then wrap these in an <a>…</a> tag and when anyone hovers over either your text or icon, both the text/icon will he highlighted as they’re wrapped in the same <a> tag.
You can also if use Bootstrap CSS if you’re using the BB Theme. This will help in getting your icons and text aligned the way you like - http://getbootstrap.com/
I would hug you if I saw you in person… Man hug, of course.
I didn’t follow your instructs exactly. I went into global settings and put in the CSS and JS code there (which you didn’t say) instead of putting it the customizer (which you did say).
But now I decided to change my site so that any time I want to change my heading (H1 to H6) font size or font color, I can just go to the customize page…
Long story short, I changed the heading color (H1 to H6) to a blue… On the pages with these links, I have an H1 font, which automatically shows up in blue. When I manually change that heading from blue to black within the text module, the hover functions no longer work on that link.
It doesn’t matter if I hover over that text directly, or the icon / icon group it’s supposed to highlight along with.
For whatever it’s worth, the text module does not even highlight when hovered over. Seems like the hovered function is broken, haha.
And yes, I had other pages on the site marked as private… I haven’t launched it to the full public yet. I’ll put 3 pages on public so you can see what’s happening.
Yes, when I don’t assign a color, everything works. And when I do assign the color, the text (in h6) does not highlight at all.
However, I do not want that color when the text is not highlighted for this particular piece of my site.
Let me give some more details. In the customize panel, my heading color (H1 to H6) is set to blue. Throughout my blog posts and other pages, I want the h1 to h6 texts in blue. However, for this one piece I built, I have text at h6 in a text module, and this automatically shows up in blue. However, for this piece only I want it in black.
I’ve also tried changing the “link color” on the row to black, but that didn’t work. The h6 text still shows in blue even though it’s a link.
The problem here is that when you set colors on texts inside the Text Editor module, they’re added as inline styles, and it overrides all styles from the CSS, which is how we styled the hover effect. You’ve also made the text to a link, and this adds an anchor inside the h6 tag.
We could add another target to the styling as well as mark it important and it should still work. Can you remove the previous styling and replace it with the one below?
.hovered-set.hovered i:before,
.hovered-set.hovered h6 span,
.hovered-set.hovered h6 span a {
color: blue !important;
}