[Content Hidden]
Hey John,
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');
});
});
Let us know how it goes! 
Ben
Hey,
Finally getting to this.
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.
Any help with this is greatly appreciated!
Thanks!
Hi John,
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.
For assistance with the HTML code, I recommend you check out the Font Awesome website - https://fortawesome.github.io/Font-Awesome/icons/
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/
Thanks,
Danny
Sorry, but Danny’s instructions aren’t helping. Is there any way you guys can give this another shot?
There has to be a way to make all the icons in an icon group highlight at the same time when one icon is hovered over.
There also has to be a way to make it so an icon module or icon group module highlights at the same time as a text module when either is hovered over.
Thanks,
John
Hey John,
Can you try this instead? You’ll need to add the class hovered-set to each column. Add the code below to the JS Code section in the customizer.
(function ($) {
$(function() {
$( '.hovered-set' ).each(function() {
$(this).find('i,h6').hover(function() {
$(this).parents('.hovered-set').addClass('hovered');
}, function() {
$(this).parents('.hovered-set').removeClass('hovered');
})
})
})
})(jQuery)
You’ll need to add this code to the CSS Code section as well.
.hovered-set.hovered i:before,
.hovered-set.hovered h6 {
color: blue;
}
Let us know how it goes!
Ben
Didn’t work.
When I added that code, the spacing on other parts of the page got all messed up.
I’ll just figure out another way to work with it.
That’s weird, as I recreated the exact same layout on my end and it works fine.
http://recordit.co/lESMlCOtFY
Anyhow, we’d really appreciate it if you share how you’re going to manage it.
Ben
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).
That did the trick.
THANK YOU!
Awesome! Glad I could help. Enjoy!
Ben
so… we did have it fixed…
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.
Any thoughts?
Hey John,
Did you switch from h6 to h1? If so, you’ll have to change the code above. Simply change the h6’s to h1’s and that should fix you right up!
BTW, the site went to a 404 error when I visited it just now. Just thought you should know.
Ben
Ben,
I did not change from h6 to h1.
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.
[Content Hidden]
Hi John,
I think the issue here is that you have now set a color for your icons which is overriding the CSS provided by Ben.
Can you remove the color for your icon and see if this resolves the issue, please?
Thanks,
Danny
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.
Hey John,
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;
}
Ben
S P E C T A C U L A R !
Thanks again!
No worries at all, John! Glad we could help. Enjoy!
Ben