使用javascript-jQuery函數設置CSS屬性

Question

我需要動態更新css屬性，

實際的CSS屬性：

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

我需要設置top = -100px動態。

我做了什么 ：

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

第二選擇我嘗試了什么：

創建了一個新的CSS類：

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

然后

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

如果您還有其他選擇，請提出建議。

感謝您查看問題。

更多說明

當將鼠標懸停在li標簽上時，這用於工具提示UI。

當前（默認）工具提示在文本“成功訂閱”底部可見

** HTML：**

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

完整的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);

}

現在，在執行一些功能之后，我需要顯示top = -100％的工具提示

Answer 1

問題是您無法使用JavaScript定位偽元素（ :after ）。 它們是特定於CSS的，不會暴露給DOM供JavaScript訪問（或修改）。

如果-100px是固定值，則解決方法是在您的CSS中添加一個單獨的類來處理此問題：

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

然后可以使用jQuery進行切換：

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

Answer 2

您無法做您想做的事情，因為偽元素不是DOM樹的一部分，因此您無法使用DOM API更改其屬性。

相反，您可以嘗試另一種方法：添加一個可以定義必要樣式的類。 例如：

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

_{注意：在這種情況下不需要!important}

然后分配新的班級

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