Question

我目前遇到一些css代码问题。我想要实现的是当有人在#trigger的链接上悬停时，显示div #hidden。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #hidden {
            display: none;
            position: absolute;
            top: 20px;
            left: 100px;
            border: 1px solid red;
        }

        #trigger {
            border: 1px solid white;
            background: red;
        }
        #trigger:hover #hidden {
            display: block !important;
        }

    </style>
</head>
<body>

<div id="hidden">
    This hidden div.
</div>

<span id="trigger">
    <a href="#">Show</a>
</span>

</body>
</html>

我试图理解为什么这个代码拒绝工作。我在很多地方都使用过类似的代码而且效果很好。这有什么问题？

Answer 1

div hidden不在trigger div中。

您可以按照以下方式使用CSS代码：

<span id="trigger">
    <a href="#">Show</a>

    <div id="hidden">
        This hidden div.
    </div>
</span>

顺便说一句，请考虑绝对定位div（#hidden）将以poistion: relative或absolute为起点（0， 0）。如果没有，则需要身体的x和y。

Answer 2

将#hidden元素放在#trigger元素中，您的选择器将起作用。

在您的选择器上#trigger:hover #hidden正在尝试查找#hidden。

悬停在span / link上的奇怪css行为

2 个答案: