使用javascript jQuery函数设置css属性

Set css property using javascript-jQuery function

本文关键字：css 属性 设置 函数 javascript jQuery 使用      更新时间：2023-09-26

我需要动态更新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.

如果您有其他选择，请提出建议。

感谢收看问题。

更多解释

这用于工具提示UI，当鼠标悬停在li标记上时。

当前（默认）在文本"成功订阅"底部可见的工具提示

**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%

问题是您不能用JavaScript瞄准伪元素（:after）。它们是特定于CSS的，不暴露在DOM中供JavaScript访问（或修改）。

如果-100px是一个固定值，解决方法是在CSS中添加一个单独的类来处理这个问题：

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

然后您可以使用jQuery:进行切换

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

您不能做您试图做的事情，因为伪元素不是DOM树的一部分，所以您不能使用DOM API更改它们的属性。

相反，您可以尝试另一种方法：再添加一个类来定义必要的样式。例如：

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

注意：在这种情况下不需要!important

然后分配新的类别

$("#Controls > ul > li").addClass("topTip");
相关文章：