(부모를 파괴하지 않고 : 가져가 CSS 규칙)

Question

나는 (안드로이드 홀로그램과 같이 expandeable면 100 % heigth에) HTML의 메뉴

<div id="menu"> 
<button class="menubutton"></button> 
<button class="menubutton"></button> 
</div> 

이 메뉴가 정상적으로 유지했다 투명하고 짧은 너비 :

#menu { 
background-color: transparent; 
width: 8%; 
} 

아이디어는 확장하고 호버에 색칠하는 것이 었습니다. 그것은 쉬웠다 :

#menu:hover { 
background-color: blue; 
width: 90%; 
} 

여기까지는 문제가 없다. 나는 똑같은 초점을 맞춰야한다. css에서 자식 포커스에 대한 부모 css를 변경할 방법이 없습니다 (도중에 마우스를 가져 가지도 않지만 필요하지 않습니다. 전체 메뉴를 사용할 수 있습니다). 그래서 내가 스크립트를 사용 :

var menubuttonfocus = document.getElementsByClassName("menubutton"); 
    for (i=0; i<menubuttonfocus.length; i++) { 
    menubuttonfocus[i].addEventListener("focus", function() { 
     menu.style.backgroundColor = "blue"; 
     menu.style.width = "90%"; 
    }); 
    menubuttonfocus[i].addEventListener("blur", function() { 
     menu.style.backgroundColor = "transparent"; 
     menu.style.width = "8%"; 
    }); 
    } 

스크립트는 문제가, 잘 작동 당신은 버튼, #menu의 CSS 초점을 맞춤으로써 이러한 이벤트 트리거 때 어떻게 든 변화를 가져 때 #menu 변경하지 않습니다 유혹. 나는 비슷한 일이 아니라 호버로 대신 초점의이 문제를 해결하려 :

menu.addEventListener("mouseenter", function(){ 
     menu.style.backgroundColor = "blue"; 
     menu.style.width = "90%"; 
    }); 
    menu.addEventListener("mouseout", function(){ 
     menu.style.backgroundColor = "transparent"; 
     menu.style.width = "8%"; 
    }); 

이 어떻게 든 작동하지만, 정말 버그입니다. "#menu : hover, # menu : focus"도 선택하려고했으나 초점이 #menu가 아닌 button 요소에 있기 때문에 작동하지 않습니다. jquery를 피할 수 있으면 피하십시오. 너무 많은 것을 요구하지만 순수한 CSS 솔루션이 우수 할 것입니다. 아마 도움이되는 정보 : html 요소는 javascript로 dinamically 만들어집니다. 필요한 경우 더 많은 코드 또는 스크린 샷을 표시 할 수 있습니다 (크롬 앱). chrome webstore page 감사합니다.

해결 : 저는 @GCyrillus가 javascript eventListener를 통해 #menu 클래스를 포커스 변경한다고 말했습니다. .buttonbeingfocused는 "#menu : hover"와 같은 CSS를 포함합니다. 당신이 #menu 그 반대를 mouseleaving있다 - - 그래서 메뉴
당신이 초점/mouseentering .menubutton : 당신이 한 가지를 잊지 - 문제가 내가 생각하는 것입니다 경우

var menubuttonfocus = document.getElementsByClassName("menubutton"); 
    for (i=0; i<menubuttonfocus.length; i++) { 
    menubuttonfocus[i].addEventListener("focus", function() { 
     menu.classList.add("buttonbeingfocused"); 
    }); 
    menubuttonfocus[i].addEventListener("blur", function() { 
     menu.classList.remove("buttonbeingfocused"); 
    }); 
    } 

Answer 1

: 여기에 스크립트입니다 당신이 당신의 메뉴를 보여주고 그것을 동시에 숨기기 때문에 행동은 예측할 수 없다.

솔루션은 일반적으로 스크립트의 "숨기기"부분을 실행하기 전에 일부 시간 초과를 설정하고 "표시 중"부분을 실행할 때이 시간 제한 (있는 경우)을 지우십시오./

var menuTimeout; 

    function showMenu() { 
     if (menuTimeout) clearTimeout(menuTimeout); 
     menu.style.backgroundColor = "blue"; 
     menu.style.width = "90%"; 
    } 

    function hideMenu() { 
     menuTimeout = setTimeout(function() { 
     menu.style.backgroundColor = "transparent"; 
     menu.style.width = "8%"; 
     }, 800); 
    } 

//then add your listeners like you did - but put these functions as a handlers - like this: 
menu.addEventListener("mouseenter", showMenu); 
... 
//in addition you need also "mouseenter" and "mouseleave" events handled on .menubuttons