CODEWITHSUNDEEP
javascriptjquery
Saurin Vala
Saurin Vala

Reputation: 1928

Set css property using javascript-jQuery function

I need to update css property dynamically,

Actuall css property:

#Controls > ul > li:hover:after{
top:100px;
/* other property */
}

I need to set top = -100px dynamic.

What I did : 

$("#Controls > ul > li:hover:after").css("top", "-100%"); // Its not working

2nd Option what I tried :

Created a new css class : 

 .topTip{top:-100%  !important;}

then

 $("#Controls > ul > li:hover:after").addClass("topTip") //Again not working.

Please suggest if you have other options.

Thanks for viewing question.

More EXPLANATION

This is used for tooltip UI, When hover mouse over li tag.

Currently (default) tooltip visible on bottom of text "success subscribe"

**HTML : **

<div id="Controls">
     <ul class="hideMobile">
            <li tooltip="This is tooltip" class="SubscribeTool">
              <a id="#" class="liked" > success subscribe</a>
           </li>

Complete css:

 #Controls > ul > li:hover:after {
 position:absolute; top:100%; left:-5px; padding:0 10px; margin-top:5px; content:attr(tooltip); width:auto; height:auto; 
 display:inline-block;
 background:#e55302; color:#fff; font:600 11px/25px Arial, Helvetica, sans-serif; text-align:center; 
 z-index:9999999999 !important; border-radius:2px; text-shadow:1px 1px 1px rgba(0,0,0,.4);

}

Now, after some functions, I need to display tooltip with top=-100%

Upvotes: 2

Views: 74

Answers (2)

dfsq
dfsq

Reputation: 193261

You cannot do what you are trying to do, because pseudo elements are not part of the DOM tree, so you can't change their properties with DOM API.

Instead you can try another approach: add one more class that would define necessary styles. For example:

#Controls > ul > li.topTip:hover:after {
    top: -100px;
}

Note: !important in not needed in this case

and then assign new class

$("#Controls > ul > li").addClass("topTip");

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128771

The problem is that you can't target pseudo-elements (:after) with JavaScript. They are CSS-specific and not exposed to the DOM for JavaScript to access (or modify).

If -100px is a fixed value, a workaround to this is to add a separate class to your CSS which handles this:

#Controls > ul > li.topTip:hover:after {
    top: -100px;
}

Which you can then toggle with jQuery:

$("#Controls > ul > li").addClass("topTip");

Upvotes: 3

Related Questions