Removing the Hover effect on a Standard Icon Box

[Jackcoldrick]

Hi guys,

I am trying to remove the hover effects on the standard icon boxes. You can see it in action here: http://dante.swiftideas.com/shortcodes/icon-boxes/.

I basically don’t want the background to turn blue or the border to show up blue underneath.

Could you please advise,

thank you,

J

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.sf-icon-box.sf-icon-box-standard {
  pointer-events: none;
}

– Kyle

[Jackcoldrick]

Brilliant. Thanks Kyle.

[Kyle – SUPPORT]

No problem

– Kyle

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sf-icon-cont:hover{
    background-color: #fff !important;
}
.sf-hover .sf-icon-box-hr{
color:#e4e4e4 !important;
}

Thanks
Mohammad

[Kyle – SUPPORT]

This topic is already resolved Mohammad

– Kyle

[Heli]

Hello,

I hope to do the same as the person starting this question.

When I use

.sf-icon-box.sf-icon-box-standard {
pointer-events: none;
}

…all the links in my iconbox text area do not work. I really only want to get rid of the hover effect when the mouse is on the very icon. Is that also possible?

Thank you very much.
Tanja

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.standard-browser .sf-icon-box-animated:hover .inner, .no-csstransitions .sf-icon-box-animated .inner, .sf-icon-box-animated.sf-mobile-hover .inner {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
    color: #ffffff !important;
    display: none !important;
}

Thanks
Mohammad

[Heli]

Hello Mohammad,

thank you very much for your help. The mouse pointer does not turn into a little hand any more, which is good. I also wanted to get rid of any effect on hover. Right now, the icon still changes color and there is also a line that appears under the icon (standard icon box).
How do I get rid of the effect?

Thank you

[Mohammad – SUPPORT]

Hi,
Please provide me specific page url with issue.
Thanks
Mohammad

[Heli]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sf-icon-cont:hover, .sf-hover .sf-icon-cont, .sf-icon-box[class*="icon-box-boxed-"] .sf-icon-cont, .sf-hover .sf-icon-box-hr {
    background-color: transparent !important;
}

Thanks
Mohammad

[Heli]

It worked! Brilliant, thank you.

Tanja

[Kyle – SUPPORT]

No problem, thanks Mohammad

– Kyle