블로그옮김글]bootstrap - dropdown menu mouseover 시 작동 시키기 - jQuery & Javascript & CSS



부트스트랩의 navbar의 dropdownmenu 의 경우에 클릭시에 리스트들이 나온다.

 

(일반 dropdown 은 div로 되어 있지만 navbar 안에는 ul/li 로 들어가있다. 물론 div로 해도 되긴 하겠지만;;)

 

 

이를 클릭이 아닌 mouseover 로 하고 싶을 경우 css에 다음을 추가해준다.

 

ul.nav li.dropdown:hover > ul.dropdown-menu{

    display: block;    

}

 

 

위는 nav 클래스의 ul 내의 dropdown 클래스인 li 가 호버 되었을 경우 자식( > ) 중 dorpdown-menu 클래스의 ul 의 display 를 block 시키는 것이다. 즉 활성화이다.

 

 

이때, 이상태로는 하위 dropdown-menu 리스트로 마우스 오버 했을 시 

dorpdown 의 ul의 색깔은 다시 원상태로 돌아가게 된다. 

클릭했을때처럼 색깔을 계속 유지하고 싶다면

jquery 로 작업을 해준다.

(css상에서 처리를 시도했으나 실패했다 ㅜㅠ)

 

$(".dropdown-menu").mouseover(function(){

    $(this).parent('.dropdown').css({'backgroundColor':'white'});

    $(this).parent('.dropdown').children('a').css({'color':'#005e9e'});

  });

  $(".dropdown-menu").mouseout(function(){

    $(this).parent('.dropdown').css({'backgroundColor':'#005e9e'});

    $(this).parent('.dropdown').children('a').css({'color':'white'});

  });

 

여기서 backgroundColor 와 color 는 본인의 설정에 맞추어 한다. 

 

 

---수정--

$(".dropdown-menu").mouseout(function(){

    $(this).parent('.dropdown').css({'backgroundColor':'#005e9e'});

    $(this).parent('.dropdown').children('a').css({'color':'white'});

  });

 

이 부분을 이렇게 하면 새로이 style 이 적용되어 기존 값으로 안돌아가는 예외가 발생. 

따라서 아래처럼 style 속성 자체를 없애는 것으로 대체

 

$(".dropdown-menu").mouseout(function(){

    $(this).parent('.dropdown').removeAttr('style');

    $(this).parent('.dropdown').children('a').removeAttr('style');

  });





AD_1