2012-09-30 4 views
0

이 도메인에 새 사이트를 만듭니다. keksik.com 상단에 탐색 메뉴가 있습니다.이 항목에 배경이있는 경우 메뉴 항목의 글꼴 색상 변경

문제는 활성 메뉴 항목의 글꼴 색이 들러 붙지 않아도 검은 색이어야한다는 것입니다. 하위 항목에 마우스를 올리면 동일한 메뉴 항목이 적용됩니다.

그래서 메뉴 항목에 배경 이미지가있는 경우 동적으로 글꼴 색을 검정색으로 변경하려면 javascript를 사용해야한다고 생각합니다.

나는 머리에이 코드를 추가했지만, 아무것도 변하지 않는다 :

<script type="text/javascript"> 

$(document).ready(function(){ 
    if ($(#top #nav li).css('background') == 'url(images1/mtbg.gif) no-repeat left center') { 
    $(#top #nav li a).css('color', 'black'); 
    } 

}); 
</script> 

그래서, 나는이 문제를 도와 줄 수 있기를 바랍니다. 미리 감사드립니다.

+1

사실 나는 적절한 링크와 그 부모에 대한 일종의 능동적 인 수업을해야한다고 생각합니다. 가능하다면. – kalpaitch

+0

문제는 메뉴 항목을 가리키면 흰색이 검은 색으로 바뀌지 만, 항목을 붙이지는 않았지만 배경이 남아 있으면 흰색을 유지하지만 검은 색으로 유지해야한다는 것입니다. –

+0

hover, : active?에 대한 적절한 CSS 정의를 사용하지 못하게하는 이유는 무엇입니까? – vittore

답변

1

흠 ..하지 않도록 이해,하지만 어쩌면이 같은 작동합니다 :

var strBG = "url(images1/mtbg.gif) no-repeat left center"; 
$("#top #nav li a").live("hover", function(){ 
    if ($(this).parent().css("background") == strBG) 
    { 
     $(this).css("color", "black"); 
     $(this).parent().css("color", "black"); 
    } 
}); 
$("#top #nav li").live("hover", function(){ 
    if ($(this).css("background") == strBG) 
    { 
     $(this).css("color", "black"); 
     $(this).find("a").css("color", "black"); 
    } 
}); 
+0

당신의 해결책이 좋아 보인다. /head 태그 앞에이 코드를 삽입했습니다. 하지만 작동하지 않습니다. 제발, 내가 제대로 삽입되었는지 확인하십시오. 내가 필요한 것을 설명하려고 노력할 것입니다. keksik.com을 열면 첫 번째 메뉴 항목에 배경 및 whie 글꼴이 있지만 검은 색이어야합니다 (가져 가야 함 없음). 다른 항목을 가리키면 첫 번째 항목의 글꼴 색이 흰색이어야합니다. 메뉴 아이템. 세 번째 메뉴 항목을 가리킨 다음 그 아이를 가리키면 똑같은 일이 발생합니다. 부모의 글꼴 색은 흰색으로 전환되지 않고 검은 색이어야합니다. 어떤 경우에는 텍스트 아래에 배경이 있습니다 - 배경이없는 흰색은 검은 색이어야합니다. –

+0

2 가지를하십시오 : 1)이 jquery 파일을 호출해야합니다. http://code.jquery.com/jquery-1.7.1.min.js 2) 배경은 'url (".. /images1/mtbgo.gif ") repeat-x 왼쪽 상단 투명 스크롤 ' 3) 더 나은 해결책을 추가했습니다. 당신에게 맞는 지보십시오. – Devaffair

0

난 당신이 요구하는지 아주 잘 모르겠지만, 왜 그냥 사용할 수 없습니다 :

#top #nav li.active, 
#top #nav li.active:hover { 
    color: black; 
} 

무엇이 잘못 되었나요?