목록 위로 마우스를 가져 가면 텍스트가 표시됩니다.

Question

드롭 다운 메뉴의 "FS1"목록 텍스트 위에 마우스를 가져 가면 "OL" "하위 목록"을 표시하려고합니다. 여기에 내가하려고하는 것에 대한 데모가 있습니다 :

누군가가 "UL" "List"의 텍스트 위에 마우스를 가져 가면 "OL" "Sublist"를 어떻게 보이게 할 수 있습니까? ?

코드의 조각

난은 IS 찾고 :

CSS :

.wrap .sublist {text-decoration: none; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 20px; 
        visibility: hidden; position: absolute; top: 0.8em; left: 3.8em; z-index: 600; font-weight: lighter; color: #222;} 
     .wrap .sublist a {color: #06C; position: absolute; top: 3em; font-weight: bold; font-size: 13px;} 
     .fs1:hover .wrap {visibility: visible;} 

HTML :

<ol class="sublist"> 
    <li>FS (All)</li> 
    <li><a href="">FS</a></li> 
</ol> 
<ul class="list"> 
    <li class="fs1"><a href="">FS1</a></li> 
    <li id="c1"><a href="">C1</a></li> 
    <li id="wt1"><a href="">WT1</a></li> 
    <li id="a1"><a href="">A1</a></li> 
</ul> 

Answer 1

자바 스크립트를 사용할 수 있습니다! 예를 들어
는 :

<script language="Javascript> 
function appear() { 
document.getElementById("sublist").style.display = "block"; 
} 
function hide() { 
document.getElementById("sublist").style.display = "none"; 
} 
</script> 

<ol class="sublist" id="sublist"> 
... 
</ol> 
<ul class"list"> 
<li class="fs1" onmouseover="appear()" onmouseout="hide()"><a href="">FS1</li> 
... 
</ul> 

Answer 2

는이 같은 뭔가를 찾고 계십니까?

<style> 
.sublist {text-decoration: none; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 20px; 
        display:none; position: absolute; top: 0.8em; left: 3.8em; z-index: 600; font-weight: lighter; color: #222;} 
     .wrap .sublist a {color: #06C; position: absolute; top: 3em; font-weight: bold; font-size: 13px;} 
     .fs1:hover .wrap {visibility: visible;} 
.su 
</style> 
<script> 
function show() 
{ 
document.getElementById("sublist").style.display="block"; 
} 
</script> 
<ol class="sublist" id="sublist"> 
    <li>FS (All)</li> 
    <li><a href="">FS</a></li> 
</ol> 
<ul class="list"> 
    <li class="fs1"><a href="" onmouseover="show();">FS1</a></li> 
    <li id="c1"><a href="">C1</a></li> 
    <li id="wt1"><a href="">WT1</a></li> 
    <li id="a1"><a href="">A1</a></li></div> 
</ul> 

Answer 3

는 .sublist를 전환 .fs1에 mouseenter 및 mouseleave 이벤트에 대한 eventhandlers을 연결합니다. 초기에 .sublist을 숨기려면 display:none을 사용하는 것이 중요합니다.

자바 스크립트

$(".list .fs1").bind({ 
    mouseenter:function(){ 
     $(".sublist").show(); 
    }, 
    mouseleave: function(){ 
     $(".sublist").hide(); 
    } 
}); 

CSS

.wrap .sublist { 
    text-decoration: none; 
    list-style: none; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 20px; 
    display:none; 
    position: absolute; 
    top: 0.8em; 
    left: 3.8em; 
    z-index: 600; 
    font-weight: lighter; 
    color: #222; 
} 

JS 바이올린 : 여기http://jsfiddle.net/EfLJJ/2/