Proper way to disable Icon Box hover effects

[tyruladesign]

Hi there, what would be the proper way to disable the icon box hover effects? This effect makes it look as if the section is clickable, which is not what we want for our use. I’ve tried overriding the styles with custom css but ran into issues with the other icon boxes throughout the site not appearing correctly.

http://dante.swiftideas.net/shortcodes/icon-boxes/

Thanks!

[Kyle – SUPPORT]

Hi

In functions.js, remove these lines from line 2254:

		iconBoxes: function() {
			jQuery('.sf-icon-box').hover(
				function() {
					jQuery(this).addClass('sf-hover');
				}, function() {
					jQuery(this).removeClass('sf-hover');
				}
			);
		},

– Kyle

[tyruladesign]

awesome, thanks Kyle!

[Swift Ideas – Ed]

Great, cheers Kyle!

– Ed

[manciaz]

Hi Kyle,
I tried to do as you wrote, but instead of disable iconboxes hover it turned off all my parallax stellar type scroll (and iconboxes still hover)!

[Kyle – SUPPORT]

Hi

Did you make sure you removed the same code? It is likely that the lines will have been different

– Kyle

[manciaz]

Of course I’m sure, in fact it’s quite weird… And I figured out that when I add those back, scroll on parallax images works again
I can’t understand connection between icon boxes and parallax scrolling… it’s so strange!

[manciaz]

Highlighted lines are the one I removed and that you quoted…

[Kyle – SUPPORT]

Strange, there should be no connection, let me ask the developer about this.

– Kyle

[manciaz]

Ok, it’s more strange than important issue… for now I added some custom CSS to disable hover, but I liked your solution, more clean…

[joerg]

How can disabling the hover effect be achieved without touching the functions.js? Is there a way to achieve the same by just adding some code to the custom css/js?

[Kyle – SUPPORT]

@manciaz – please share your solution with css

– Kyle

[manciaz]

oh well, I just overrided used classes, setting the color and background-color you already have for non hover behaviour.
There are few .ss-icon:hover and .ss-icon-cont:hover to override
You find the one you are using (the are several icon boxes layout) searching with Firebug.
Anyway, I’d rather use JS customization…

[manciaz]

This is exactly what is working for MY layout

.sf-icon-cont:hover, .sf-hover .sf-icon-cont, .sf-icon-box[class*="icon-box-boxed-"] .sf-icon-cont, .sf-hover {
    background-color: #ffffff;
}

.sf-icon-cont.cont-small .sf-icon {
    color: #888888;
}

.sf-icon-cont.sf-icon-icon-four:hover, .sf-hover .sf-icon-cont.sf-icon-icon-four, .sf-icon-box[class*="icon-box-boxed-"] .sf-icon-cont.sf-icon-icon-four, .sf-hover .sf-icon-box-hr.sf-icon-icon-four {
    background-color: #ffffff;
}

.ss-icon, .ss-icon.ss-gizmo, [class^="ss-"]:before, [class*=" ss-"]:before, .ss-gizmo[class^="ss-"]:before, .ss-gizmo[class*=" ss-"]:before, .right[class^="ss-"]:after, .right[class*=" ss-"]:after, .ss-gizmo.right[class^="ss-"]:after, .ss-gizmo.right[class*=" ss-"]:after {
    color: #888888;
}

.sf-icon-cont.sf-icon-icon-four:hover .sf-icon, .sf-hover .sf-icon-cont.sf-icon-icon-four .sf-icon, .sf-icon-box.sf-icon-box-boxed-one.sf-icon-icon-four .sf-icon, .sf-icon-box.sf-icon-box-boxed-three.sf-icon-icon-four .sf-icon {
    color: #888888;
}

But, I repeat, I’m not so happy for this solution.

[Swift Ideas – Ed]

Will have a think about this for a potential addition in an update.

– Ed