Question

这是一个奇怪的问题，但我得到了一个html文件，它有标题的B标签和列表的单独的ol标签。

类似这样的事情

<b> Title of the list </b>
<ol>
    <li> List item 1 </li>
    <li> list item 2 </li>
</ol>

我想做的是，在标题上悬停时显示列表。我该怎么做？

现在这就是我所拥有的。

ol
{
   visibility: none;
}

我需要找到这个部分

 b:hover
 {
    /*something that shows the ol list */
 }

Answer 1

使用此代码：

HTML：

<b> Title of the list </b>
<ol>
    <li> List item 1 </li>
    <li> list item 2 </li>
</ol>

的CSS：

ol
{
   display:none;
}
b:hover + ol{
    display:block;
}

JsFiddle

<小时/> ^{您可以阅读更多here.}

Answer 2

这项工作正常，我希望您使用display代替visibility

<html>
<head>
    <title></title>
<style>
    b:hover + ol{
        display:block;
    }
    ol{
        display:none;
    }
</style>
</head>
<body>
<b> Title of the list </b>
<ol>
    <li> List item 1 </li>
    <li> list item 2 </li>
</ol>
</body>
</html>

CSS - 在元素E2上悬停时显示元素E1

2 个答案: