Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Proper way to disable Icon Box hover effects
New Landing › How can we help? › Themeforest Theme Support › Dante › Proper way to disable Icon Box hover effects
- This topic has 16 replies, 5 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
March 5, 2014 at 9:25 pm #54675
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 #54820Hi
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 #55169awesome, thanks Kyle!
March 6, 2014 at 6:01 pm #55172Great, cheers Kyle!
– Ed
March 30, 2014 at 7:42 pm #62471Hi 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 #62473Hi
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 #62481Of 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 #62486Highlighted lines are the one I removed and that you quoted…
March 30, 2014 at 8:35 pm #62493Strange, there should be no connection, let me ask the developer about this.
– Kyle
March 30, 2014 at 8:52 pm #62497Ok, 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 #62693How 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@manciaz – please share your solution with css
– Kyle
March 31, 2014 at 12:04 pm #62756oh 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 #62757This 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 #62949Will have a think about this for a potential addition in an update.
– Ed
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.