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

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

是否有可能有人向我展示當我將鼠標懸停在「UL」「列表」中的文本上時，如何讓「OL」「Sublist」？

的代碼片段我在看的是：

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>

來源

2014-01-19 fudgematico

這裏的解決方案：http://stackoverflow.com/questions/11587407/displaying-在列表中懸停的菜單？rq = 1 –

您可以使用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>

來源

2014-01-19 17:46:40 SaschaP

是的，這可能是最好的選擇。我把這些代碼放在JS Fiddle中：http://jsfiddle.net/EfLJJ/8/。但它不起作用？你能給我一個工作演示嗎？ – fudgematico

對不起，我做了一些頭暈的代碼;-)我剛剛更新了你的小提琴http://jsfiddle.net/EfLJJ/11/，我想知道爲什麼在JS小提琴它不應該像它應該，但在我的本地主機它運行完美... – SaschaP

您正在尋找這樣的事情？

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

來源

2014-01-19 17:45:58 user3212688

連接的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/

來源

2014-01-19 17:48:43

感謝您的更新這在jsfiddle工作，但它不適用於Dreamweaver？ – fudgematico

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

回答

相關問題