Proper way to disable Icon Box hover effects

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 16 replies, 5 voices, and was last updated 10 years by Kyle – SUPPORT.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Back to forum

Posted in: Dante
March 5, 2014 at 9:25 pm #54675

tyruladesign
Member

Post count: 27

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!

March 6, 2014 at 9:47 am #54820
Kyle – SUPPORT
Moderator

Post count: 35880
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
March 6, 2014 at 6:00 pm #55169

tyruladesign
Member

Post count: 27

awesome, thanks Kyle!

March 6, 2014 at 6:01 pm #55172

Swift Ideas – Ed
Keymaster

Post count: 15264

Great, cheers Kyle!

– Ed

March 30, 2014 at 7:42 pm #62471

manciaz
Member

Post count: 42

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)!

March 30, 2014 at 8:13 pm #62473

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

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

– Kyle

March 30, 2014 at 8:23 pm #62481

manciaz
Member

Post count: 42

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!

March 30, 2014 at 8:26 pm #62486

manciaz
Member

Post count: 42

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

March 30, 2014 at 8:35 pm #62493

Kyle – SUPPORT
Moderator

Post count: 35880

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

– Kyle

March 30, 2014 at 8:52 pm #62497

manciaz
Member

Post count: 42

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…

March 31, 2014 at 10:19 am #62693

joerg
Member

Post count: 28

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?

March 31, 2014 at 10:32 am #62698

Kyle – SUPPORT
Moderator

Post count: 35880

@manciaz – please share your solution with css

– Kyle

March 31, 2014 at 12:04 pm #62756

manciaz
Member

Post count: 42

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…

March 31, 2014 at 12:08 pm #62757
manciaz
Member

Post count: 42
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.
March 31, 2014 at 9:36 pm #62949

Swift Ideas – Ed
Keymaster

Post count: 15264

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

– Ed
Back to forum

Posted in: Dante