0

我目前面临一些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>

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

4

2 回答 2

2

divhidden不在triggerdiv 中。

您可以让您的 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。如果没有，那么它需要身体的 x 和 y。

于 2012-10-25T20:15:12.623 回答
1

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

在您的选择器#trigger:hover #hidden上试图找到#hidden.

于 2012-10-25T20:16:17.940 回答