HTML CSS 호버 대안

Question

마우스 오버시 호버 셀렉터 스타일 링크. 마우스로 클릭하지 않고 요소를 클릭하면 표시됩니다. 내가 사용해야 어떤 대안을 맴 돕니 다 .. 여기

Answer 1

#cssmenu li:hover ul{ display:block; } 데모의 바이올린입니다 : http://jsfiddle.net/dineshswami/nXGYc/

HTML :

<ul id="cssmenu"> 
    <li>1</li> 
    <li>2 
     <ul> 
      <li>A</li> 
      <li>B</li> 
     </ul> 
    </li> 
</ul> 

CSS :

ul#cssmenu ul{ 
display:none; 
} 

JQuery와 :

$(document).ready(function() { 
    alert("bang"); 
    $("#cssmenu li").click(function() { 
     alert("bang bang"); 
     $("#cssmenu li ul").show(); 
    }); 
}); 

Answer 2

HTML을 사용하고 CSS에만 :target 의사 클래스를 기반으로

간단한 방법 : 그래서 만약, 그러나

<style> 
#cssmenu li ul { 
    display: none; 
} 
#cssmenu :target ul { 
    display: block; 
} 
li:hover ul { display:block; } 
</style> 
<h1>menu with target</h1> 
<ul id="cssmenu"> 
    <li><a id=sub1 href=#sub1>submenu 1 
     <ul> 
      <li>foo</li> 
      <li>bar</li> 
     </ul></a> 
    </li> 
    <li><a id=sub2 href=#sub2>submenu 2 
     <ul> 
      <li>item A</li> 
      <li>item B</li> 
      <li>item C</li> 
     </ul></a> 
    </li> 
</ul> 

jsfiddle

의 :target 의사 - 클래스는 IE 8 이상에서 지원하지 않는 당신 그것들을 커버하고 싶다면, IE7.js이나 Selectivizr 같은 자바 스크립트 폴리필을 사용해야합니다 (또는 완전히 자바 스크립트 기반 접근법을 사용하십시오).