0

スタイリングは、ホバリング時にディスプレイをブロックに変更しません。コメントをいただければ幸いです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
        div ul li:hover> ul {
            display:block;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li> List Item
                <ul style="display:none;">
                    <li> Child </li>
                </ul>
            </li>
            <li> List Item </li>
            <li> List Item </li>
            <li> List Item </li>
        </ul>
    </div>
</body>
</html>
4

3 に答える 3

9

次の 3 つの理由があります。

  1. 疑似セレクターにスペースを入れることはできません。

  2. インライン スタイルは埋め込みよりも優先されるため、セレクターが正しくdisplay: block;ても効果はありません。

  3. div の直接の子である ul を選択していますが、非表示に設定されている ul は div の内部にある ul の子であるため、機能しません。

次のようなことを試してください：

div ul ul {
    display: none;
}
div:hover ul ul {
  display:block;
}
于 2013-10-11T02:12:46.060 に答える
1

!important を使用するdisplay: block;

試す

div ul li:hover > ul {
    display:block!important;
}
于 2013-10-11T02:16:07.380 に答える
0

css を次のように変更します

div ul li:hover{
    display:block;
}
于 2013-10-11T02:11:28.913 に答える