CSS 호버 변경 다른 클래스

개체 위로 마우스를 가져 가면 다른 개체의 클래스를 변경하는 방법이 있습니까? 하위 메뉴 위로 마우스를 이동하면 메뉴 항목이 변경됩니다. 나는 가지고있다;CSS 호버 변경 다른 클래스

ul.menu .menulink { 
    padding:0px 13px 0px; 
    height:23px; 
    font-weight:bold; 
    width:auto; 
} 
ul.menu ul li:hover .menulink{ 
    color:#002d36; 
    background-image:none; 
    background-color:#ffffff; 
}

HTML;

<ul class="menu" id="menu"> 
    <li> 
     <a href="#" class="menulink"><span>Main menu item</span></a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
</ul>

jQuery도 시도했습니다.

$('ul.menu ul li').mouseover(function(){ 
     $('.menulink').css('color', '#002d36'); 
     $('.menulink').css('background-color', '#ffffff'); 
    }); 
    $('ul.menu ul li').mouseout(function(){ 
     $('.menulink').css('color', ''); 
     $('.menulink').css('background-color', ''); 
    });

하지만 그건 aswell 다른 메인 메뉴 항목을 변경 .. 사람은 방법을 알고? 미리 감사드립니다.

출처

2011-02-24 Jay Wit

li의 하위 요소 인 '.melink'는 무엇입니까? HTML을 보여줄 수 있습니까? –

순전히 CSS3가 옵션입니까? 아니면 CSS2 호환 브라우저를 원하십니까? – TNC

이전 브라우저에서도 CSS2를 원합니다. 메시지를 편집하고 HTML을 넣으려고합니다. –

css에서는 객체를 거꾸로 선택할 수 없습니다. 나는 어제 jq에 도움이 될만한 작은 스크립트를 썼다.

$('.menu ul li').hover(function() { 
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#002d36'); 
}, 
function(){ 
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#F00'); 
});

편집 :이 잘 작동

: http://jsfiddle.net/YBJHP/

출처

2011-02-24 10:10:10 Rito

) 나는 이것을 어떻게 사용해야하는지 잘 모르겠습니다. jQuery :) –

죄송합니다, 자세한 내용은 http://api.jquery.com/hover/ jq lib (http://jquery.com/) 다음에 붙여넣고 사용해보십시오. – Rito

나는 호버도 jQuery의 기본 사항이지만 스크립트는 작동하지 않았습니다. 부모와 자식의 공언에 익숙하지 않습니다. 원래 게시물에 더 많은 정보가 있습니다. 도움을 많이 받으실 수 있습니다! –

순수한 CSS로 할 수 없습니다. 나는 당신이 CSS로 드롭 다운을하려고하는 것 같아요. 당신은 suckerfish보고 할 수 있습니다 :

http://htmldog.com/articles/suckerfish/dropdowns/

출처

2011-02-24 09:59:23 Finbarr

답장을 보내 주셔서 감사합니다.하지만 자바 스크립트 드롭 다운 메뉴가 완벽하게 작동합니다. 하위 항목 위로 마우스를 가져 가면 기본 항목에 흰색 배경 만 표시됩니다. 항목. 그게 정말로 불가능한가요? –

이 나는 순수 CSS를 사용하여 가능하다고 생각하지 않습니다. jQuery 사용을 권장한다. jQuery로 매우 쉽게 할 수 있습니다 :

$('.menulink').hover( 
    function(){ 
     $(this).css('background-color', '#New-Color-In-HEX'); 
    }, 
    function(){ 
     $(this).css('background-color', '#Old-Color-In-HEX'); 
    } 
);

출처

2011-02-24 10:04:58 Kamyar

이 방법은 작동하지만 모든 메인 메뉴 항목을 변경합니다. 상위 메인 메뉴 항목 만 변경하는 방법이 있습니까? –

@ 제이 : 더 나은 해결책이 있어야하지만, 지금 당장 생각해 볼 수있는 것은 부모 메인 메뉴 항목에 대한 특정 클래스를 정의해야한다는 것입니다. ('.mainmenulink'라는 새로운 클래스에서 CSS 스타일을 복제하십시오.)'$ ('. mainmenulink'.hover (...' – Kamyar

내가 무엇을 당신이하려는 것은 부모가 당신이 하위 메뉴/하위 메뉴를 탐색 할 때 강조 유지라고 생각합니다. 이를 달성하려면 호버 스타일을 <a> 대신 <li> '에 적용해야합니다. 이에 대한 예가 one of the suckerfish demos입니다.

출처

2011-02-24 10:15:07 Marcel

CSS 호버 변경 다른 클래스

답변

관련 문제