2017-12-04 2 views
0

다음은 코딩에서 발견하고 구현 한 부트 스트랩입니다. 흰색에서 녹색으로 호버 효과를 생성하려고하는 중입니다. 그러나 그렇게하지 못하게합니다. 내 sass 파일이 부트 스트랩을 무시하지 않습니다. 누군가 도울 수 있습니까? 감사. 당신의 SASS 파일들이 마지막으로 구문 분석되도록 부트 스트랩 파일 이후에로드 할 필요가 코멘트에 언급 한 바와 같이CSS가 넘지 않는 부트 스트랩

<div class="col-sm-3 sidebar"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li id="activeRow"class="active"><a href="#">Dashboard</a></li> 
      <li><a href="#">Users</a></li> 
      <li><a href="#">Suppliers</a></li> 
      <li><a href="#">Online Course</a></li> 
     </ul> 
</div> 



#activeRow 
     background-color:green 
+0

확인 당신이 당신의 말대꾸를 포함하는 순서, 확인 전 ts last. 최후의 수단으로! important를 사용할 수 있습니다. –

+2

먼저, "inspect element"를 마우스 오른쪽 버튼으로 클릭하고 구문 분석 된 CSS 규칙을 살펴보십시오. 보다 구체적인 규칙이 그것을 무시할 가능성이 있습니다. 그것이 트릭을하지 않는다면 CSS 규칙을 보여주십시오. – ceejayoz

+0

inspect 요소에서 구문 분석 된 CSS를 찾을 수 없습니다. –

답변

1

또한, 모든 특이성에 관하여이다. 그들은 이유 :

Read up on specificity here에 대한 스타일 시트를 계단식라는 것, 그것은

시도는 부모 요소 중 하나 (needbe 경우)하지만, 그냥이 충분히 구체적이어야에 고유 한 클래스/ID를 추가하는 기본 CSS 개념이다 :

.sidebar .nav #activeRow:hover 

아무것도 당신이 러시 등의 사용에있어, 작동하지 않는 경우 그 고유 ID/클래스

#awesome.sidebar .nav #activeRow:hover 

을 추가 할 경우 :

background-color: green !important 

이것은 대단한 관행은 아니지만, 스스로 구멍을 파고들 수 있습니다. 최고의 특이성을 가지고 더 구체적인 코드를 작성하는 것이 좋습니다.

SASS, download the bootstrap libraries SASS files에 익숙하고 부트 스트랩 코어를 업데이트하는 것이 더 나은 방법이라면, 이것은 상당히 고급 옵션입니다.

나는 또한 :hover을 사용하고 있다고 가정합니다.

nav li{ color: white}의 스타일을 지정한 다음 #activeRow { color: green}을 사용하면 효과가 없습니다.

enter image description here

: 당신은 당신이 나타납니다 당신이 '요소'탭에있어 확인, 검사 클릭, 오른쪽 페이지를 클릭하여 관리자에서보기 분석 CSS 되려면 #activeRow:hover

를 사용할 필요가

#activeRow>a:focus,#activeRow>a:hover 
    background-color: green 

예 :

관련 문제