html - 2个div在一个地方

Question

我有带有以下 CSS 的 div:

div{
    width:250px;
    height:250px;
    display:inline-block;
    border-radius: 10px;
    margin:10px;
    background:#2E2922;
    vertical-align:top;
}

它们在我的 HTML 中作为网格对齐。我想要放置在第一个网格相同位置的第二个 div 网格，并且仅在悬停时显示自己。所以，它基本上就像:您在 div 中看到一张图片，将鼠标悬停在它上面，然后在 div 中出现描述而不是图片。如何实现？没有框架，请

Answer 1

我不确定我是否理解您的问题，但这是我认为您想要做的事情的解决方案:http://jsfiddle.net/3Tb9T/

<div class="wrapper">
  <div class="boxes">
    <div class="box">Box #1</div>
    <div class="box box-on-hover">Box #1.1</div>
  </div>
  <div class="boxes">
    <div class="box">Box #2</div>
    <div class="box box-on-hover">Box #2.1</div>
  </div>

.boxes {
    position: relative;
    display:inline-block;    
    margin:10px;
}

.box {
    width:250px;
    height:250px;
    border-radius: 10px;
    background:#2E2922;
    vertical-align:top;
    color: white;
}

.box-on-hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;

    background: red;
}

.wrapper:hover .box-on-hover {
    display: block;
}

如果您不想同时更改两个框，可以轻松更改悬停。