0

I need to override addthis css property it is not working when i add !important to it example

Works

$("#at4-scc").css("opacity", "1");
$("#at4-scc").css("visibility", "visible");

Result style="opacity: 1; visibility: visible;"

<div id="at4-scc" class="at-share-close-control ats-transparent at4-show at4-hide-content" title="Hide" style="opacity: 1; visibility: visible;">
   <div class="at4-arrow at-left">Hide</div>
</div>

Doesn't Works

$("#at4-scc").css("opacity", "1 !important");
$("#at4-scc").css("visibility", "visible !important");

Result style=""

<div id="at4-scc" class="at-share-close-control ats-transparent at4-show at4-hide-content" title="Hide" style="">
   <div class="at4-arrow at-left">Hide</div>
</div>

Not sure why it doesnt work. I have to override default css as that has !important property with it

Default css

    .at4-hide, .at4-hide-content {
      opacity: 0 !important;
    }
.at4-hide-content {
  visibility: hidden;
}

I also tried below this add only the last css not both.

$('#at4-scc').attr('style', 'opacity: 1 !important');
$('#at4-scc').attr('style', 'visibility: visible !important');
Learning
  • 19,469
  • 39
  • 180
  • 373
  • make those styles as a class in your `css` and use `$().addClass()` instead – Sandeep Nayak Oct 14 '15 at 05:09
  • This may help you [how-to-apply-important-using-css](http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css). – viks Oct 14 '15 at 05:11
  • 1
    Using `!important` is an anti-pattern as it negates the foundational utility of css (the cascading part). At all costs, do not use !important as it creates quite a code smell that must be "remembered"/"parsed for" by team members when css things go awry. – Kevin Friedheim Oct 14 '15 at 05:14

2 Answers2

0

instaed overriding remove previous class like 

$('#at4-scc').removeClass('at4-hide');
$('#at4-scc').removeClass('at4-hide-content');

then add

$("#at4-scc").css({"opacity":"1","visibility":"visible"});
Vishnu Katpure
  • 293
  • 3
  • 15
0

please put new css in a class and add this class on addthis, This will work.

CSS

.newClass{"opacity":"1";"visibility":"visible";}

Jquery

$('#at4-scc').removeClass('at4-hide');
$('#at4-scc').removeClass('at4-hide-content');
$("#at4-scc").addClass('newClass');
Alex
  • 8,461
  • 6
  • 37
  • 49
Deepak Dholiyan
  • 1,774
  • 1
  • 20
  • 35