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/

将鼠标悬停在列表上时显示文本

3 个答案: