Question

我在下面有一个非常简单的例子，我正在尝试做什么，and a fiddle here

<html>

<head>

<style>
#testDiv{
    display:block;
}

#hiddenDiv{
    display:none;
}

#testDiv:hover + #hiddenDiv{
    display:block;
}
</style>

</head>

<body>

<div id="testDiv">

    <h1>Hello World</h1>

    <div id="hiddenDiv">
        <h2>Hidden normally</h2>
    </div>

</div>



</body>

</html>

基本上，当我将鼠标悬停在 #testDiv 上时，我想显示 #hiddenDiv 。我需要将我想要显示的div放在 #testDiv 中，否则当我将鼠标移到它上面时它将无法访问。

这可能是CSS，还是我需要使用Javascript？

Answer 1

我不认为Google Chrome中的显示会发生变化，但如果您在方案中有其他更改内容，可以试试这个：

http://jsfiddle.net/RDBf9/

我所做的只是为testDiv悬停

添加另一种风格

#testDiv:hover{
    display:list-item;
}

更新

在您更新的方案中，testDiv成为hiddenDiv的父母（祝贺！）。

因此，您需要选择具有标识为hiddenDiv的悬停父级的testDiv，如下所示：

#testDiv:hover #hiddenDiv{
    display:block;
}

P.S：在CSS中，选择器从右到左呈现。也就是订单浏览器也读它们。

Answer 2

您的示例中的CSS：

#testDiv:hover + #hiddenDiv{
    font-weight:bold;
}

说：

任何时候#testDiv都会徘徊，将任何兄弟#hiddenDivs设置为font-weight：bold;

+表示兄弟姐妹。它适用于您的第二个示例，因为#hiddenDiv2是#testDiv2的兄弟。

当目标项嵌套时，CSS选择器将更改为子选择器。这个：

#testDiv:hover #hiddenDiv {
    display:block;
}

说：

任何时候#testDiv都会悬停，将所有子项#hiddenDivs设置为display：block;

将鼠标悬停在外部元素上时显示内部元素

2 个答案:

更新