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에없는 것이므로 의사 요소의 스타일에 영향을 줄 수는 없습니다. 대신 CSS 스타일 시트에 하나 이상의 클래스를 추가 한 다음 jQuery를 사용하여 클래스에서 클래스를 추가/제거하십시오. 원하는 스타일 변경을 유도 할 수 있습니다.

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

또는 무엇이든간에 가능합니다.