호버에서 스팬 컬러 업데이트

Question

호버에서 스팬 컬러를 업데이트하려고하지만이를 수행 할 수 없습니다. 배경 색상, 크기 등을 업데이트 할 수 있지만 글꼴 색상을 업데이트 할 수 없습니다.

HTML

<div class="subcategories"> 
    <span class="subcategory"> 
     <a class="badge-wrapper box" href="/c/anybus/anybus-embedded"> 
      <span class="badge-category-bg" style="background-color: #808281;"></span> 
      <span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge">My Span Text</span> 
     </a> 
    </span> 

CSS 내가 사용하려고 :

이

.subcategories .subcategory a:hover span{ 
    color: #6D6D6D; 
} 

Answer 1

인라인 CSS는 색상을 무시한다.

인라인 CSS를 제거하거나 스타일 시트에 중요한 태그를 추가하십시오.

작동 방식 : 인라인 CSS를 사용자가 사용하지 않는 것이 가장 바람직하기 때문에 HTML에서 이동하는 것이 좋습니다. 당신이

<span style="color: #FFFFFF;"

당신은 사용하여이 메소드를 오버라이드 (override) 할 수있는 범위에 대한 인라인 스타일을 가지고 있기 때문에 자사가 작동하지 않는 이유

.subcategories .subcategory a:hover span{ 
    background-color: #6D6D6D; 
    color: red !important; 
} 

Answer 2

입니다! 당신의 CSS에서 중요한

.subcategories .subcategory a:hover span{ 
    color: #6D6D6D !important; 
} 

Answer 3

를 제거 인라인 스타일 다음에 마우스를 올리면 작동합니다.

style="color: #FFFFFF;" 

대신,이 같은 CSS와 스타일 :

.subcategories .subcategory a span{ 
    color: #ffffff; 
}