jQueryを使用して属性要素のCSSを変更するにはどうすればよいですか？

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

DOM内に実際に存在しないため、JavaScriptを使用した擬似要素のスタイルには影響しません。代わりに、CSSスタイルシートに1つまたは複数のクラスを追加してから、jQueryを使用してクラスからクラスを追加/削除します。クラスは、あなたが望むスタイルの変更を促すことができます：

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

などです。