Question

我想要的是我在某个地方有一个看不见的div，然后当你将鼠标悬停在它上面时（它可能带有转换，不是必需的）。所以我尝试了以下内容：

- CSS代码

div.appearingBox {
display: none;
width: 100px;
height: 100px;
}

div.appearingBox:hover {
display: block;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}

- HTML代码（已添加）

<html>
    <body>
        <div class="appearingBox">
        </div>
    </body>
</html>

这不起作用......请帮忙！

Answer 1

你需要一个包装div。因为它不可见，所以无法响应：悬停。请注意，:hover位于包装器而不是元素本身。这是因为包装器是“可见的”但是透明的。

http://jsfiddle.net/Cs87c/1/

HTML：

<div class="appearingBox">
    <div>Hidden</div>
</div>

CSS：

.appearingBox div {
    visibility: hidden;
    width: 100px;
    height: 100px;
}

.appearingBox:hover div {
    visibility: visible;
    width: 100px;
    height: 100px;
    background-color: rgb(0,0,0);
    border: 1px solid rgb(0,0,255);
}

（编辑为清洁版）

CSS / HTML：悬停时出现div不起作用

1 个答案: