css - 节目使用 CSS 3

Question

我有一个问题，我有一个类和一个 div。该类设置为 display:none，当鼠标悬停时我必须显示第一个 div（这是在 display:block 中设置的）

我努力了：

.1:hover + div#2

{
    display: block;
}

但它不起作用。有没有人有一些想法在css3中制作这个？谢谢大家！

Answer 1

这就是你想要的？演示

我使用visibility了财产。

如果你想要更好的效果，你可以这样做：DEMO withtransition

如果你想使用display属性，你只需要把这些属性：

div#two {
    display: none;
}

div#one:hover + div#two {
    display: block;
}

当标记是：

<div id="one"></div>
<div id="two"></div>

+ （加号）选择器用于“目标”紧邻元素。

这是一篇关于 CSS 选择器的好文章。

PS：你不能这样做：

<div id="1">...</div> 

因为您不能使用数字作为标识符。

做个好人，莱昂纳多

Answer 2

好吧，这是您可以在悬停时执行的一种变体，以在该 div 下显示另一个 div。

JSFIDDLE

HTML

<div class="box">
    <div class="hide"></div>
</div> 

CSS

  .box {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
}
.hide {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    opacity: 0;
    z-index: 100;
}
.box:hover .hide {
    opacity: 1;
}

此外，如果您希望第二个 div 出现在第一个 div 下 - 您可以执行类似的操作...

.box:hover .hide {
    opacity: 1;
    top: 200px;
    -webkit-transition: top .6s;
}