Set css property using javascript-jQuery function -
I need to dynamically update css properties,
Actuall CSS property:
# control and gt; UL & gt; Li: Hover: After {top: 100px; / * Other property * /}
I have to set top = -100 pix dynamic.
What did I do:
$ ("# control and gt; ul> gt: li: after hover:"). CSS ("top", "-100%"); // This is not working
The second option I tried:
A new CSS class was created:
.topTip {top: -100%! Important;}
then
$ ("# controls> ul> gt: li: after hovering"). AddClass ("topTip") // is not working again
Please suggest that you have other options.
Thanks for looking at the questions
More Explanation
This tooltip is used for UI, when mouse on the li tag Hover to
** HTML: **
Currently (default) Tooltip "Subscribe to success" under visible text < Div id = "controls" & gt; & Lt; Ul class = "hideMobile" & gt; & Lt; Li tooltip = "this is a tooltip" class = "SubscribeTool" & gt; & Lt; An id = "#" class = "likes" & gt; Subscribe to success & lt; / A & gt; & Lt; / Li & gt;
Complete CSS:
# control and gt; UL & gt; Li: Hover: After {status: complete; 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 aerial, helvetica, non-serif; Text-align: center; Z-index: 9999999999! Important; Border-radius: 2px; Text-shadow: 1 px 1 px 1 px rgba (0,0,0, .4);
}
Now, after some functions, tooltip with me top = -100%
You can not do that which you are trying to do, because the pseudo elements are not part of the Dom tree, Can not change with the API.
Instead you can try another way: add another category, which will define the required styles. For example:
# control and gt; UL & gt; Li.topTip: Hover: After {top: -100px; }
Note: in this case! Important
is not required
and then assign to a new class
$ ("# control> & Gt; li ") addClass (" topTip ");
Comments
Post a Comment