Question

在我的网站上，我有一些有工具提示的元素。现在，我处理工具提示的方式是使用纯css和属性。下面的代码可以帮助您理解：

    .my-container [tooltip]:before {
      bottom: 25%;
      font-weight: 600;
      border-radius: 2px;
      background: #585858;
      color: #fff;
      content: attr(tooltip);
      font-size: 12px;
      visibility: hidden;
      opacity: 0;
      padding: 5px 7px;
      margin-right: 12px;
      position: absolute;
      right: 100%;
      white-space: nowrap;
    }
    
    .my-container [tooltip]:hover:before,
    .my-container [tooltip]:hover:after {
      visibility: visible;
      opacity: 1;
    }

    
    <div class="my-container">
        <a href="#" class="buttons" tooltip="Submit form">Submit</a>
    </div>

这很好用。现在，我想使用jQuery动态更改工具提示的css样式。为此，我正在尝试以下代码：

$('.my-container [tooltip]:before').css({
    'color' : 'red'
});

然而，没有任何改变。我怎么能用jQuery做到这一点？

Answer 1

您不能使用JavaScript影响伪元素的样式，因为它们实际上并不存在于DOM中。相反，在CSS样式表中添加一个或多个类，然后使用jQuery从元素中添加/删除该类。该课程可以推动您想要的风格变化：

.my-container.red [tooltip]:before {
  color: red;
}

或其他什么。

如何使用jQuery更改属性元素的css？

1 个答案: