將鼠標懸停在列表上時顯示文本

Question

當我將鼠標懸停在下拉菜單中的“ FS1”列表文本上時，我試圖使“ OL”“子列表”出現。 這是我正在嘗試做的演示： http : //jsfiddle.net/EfLJJ/1/

當我將鼠標懸停在“ UL”“列表”中的文本上時，有人可以告訴我如何使“ OL”“子列表”可見嗎？

我正在查看的代碼段是：

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

您是否正在尋找這樣的東西？

<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 2

您可以使用Javascript！
例如：

<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 3

附加事件處理的mouseenter和mouseleave事件.fs1該切換.sublist 。 使用display:none最初隱藏.sublist也很重要。

使用Javascript

$(".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/