悬停在跨度上无效

Question

我是css的新手,我已编写代码来显示悬停时的一些文字.但它没有用

HTML:

<div id="onHover"> 5
<span>
    <ul>
        <li>Ankur</li>
        <li>Dhanuka</li>
    </ul>
</span>
</div>

CSS:

#onHover span:hover
{
 bottom:130px;
 left:105px;
 padding:8px 8px 10px 8px;
 display:block;
 border:1px dashed #09f;
 background-color:#FFF;
 min-width:170px;
 position:relative;
 z-index:101;
}
#onHover span:hover ul {
font-weight:normal;
list-style:none;
margin:10px 0 0 0;
padding:0;
position:relative;
}
span {
display:none;
}

你也可以看到这个小提琴http://jsfiddle.net/ankurdhanuka/ccFxu/

请帮忙

提前致谢

Answer 1

你的HTML应该是这样的(跨度是没用的,所以我把它拿出来,HTML4中也不允许它.它在HTML5中......):

<div id="onHover"> 5
         <ul>
            <li>Ankur</li>
            <li>Dhanuka</li>
        </ul>
</div>

然后你可以在div上添加一个:悬停效果,如下所示:

#onHover ul {
    display: none;
}
#onHover:hover ul {
    display:block;
}

如您所见,:悬停已启用#onHover,但它会触发ul其中.

DEMO