0

我是 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/

请帮忙

提前致谢

4

3 回答 3

6

你的 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;
}

正如你所看到的， :hover 是 on #onHover，但它会触发它的ul内部。

演示

于 2013-10-07T13:03:14.250 回答
1

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

设置为的元素display:none将不可见，实际上在视图中不占空间。因此，您无法悬停在span实际上不可用的位置上，因为display:none.

于 2013-10-07T13:03:15.463 回答
1

不错的尝试，朋友。给 :hover， #onHover因为 5 包含在 内#onHover。
仅在需要时使用位置。
检查这个。 http://jsfiddle.net/ccFxu/3/

于 2013-10-07T13:12:12.370 回答