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上添加：hover效果，如下所示：

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

如您所见，：悬停在#onHover上，但它会触发其中的ul。

DEMO

Answer 2

您正在通过css将display:none设置为span。

设置为display:none的元素将不可见，并且实际上在视图中不占用空间。因此，由于span，您无法将鼠标悬停在实际无法使用的display:none上。

Answer 3

好的尝试，朋友。将:hover提交至#onHover，因为#onHover中包含5 仅在需要时使用位置检查一下。 http://jsfiddle.net/ccFxu/3/

悬停在跨度上无效

3 个答案: