Question

我有以下CSS的div：

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

它们在我的HTML中作为网格对齐。我希望在第一个网格中放置在相同位置的第二个div网格，并且仅在悬停时显示它们自己。所以，它基本上就像：你在div中看到一张图片，将鼠标悬停在它上面，而不是pic在div中显示描述。怎么实现呢？没有框架，PLZ

Answer 1

  $(".one,.two").hover(function(){
       $(".two").hide();
  },function(){
       $(".two").show();
  });

Check on Fiddle

我已经为你举了一个例子，你必须使div绝对并用简单的jquery代码实现你想要的东西。

用小提琴检查

Answer 2

您可以将一个div放在另一个中，并使用position和display属性与hover结合使用：

演示

http://jsfiddle.net/Uu3Hb/3/

代码

<div id="outer">
    wazzup, doc!
    <div id="inner">
        I'm hidden until someones hover me  
    </div>
</div>

#outer {
    position: relative;
    width: 100px;
    height: 100px;
    border: 3px solid #000;
}

#outer:hover #inner {
    display: block;
}
#inner {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: yellow;
}

Answer 3

我不确定我理解你的问题，但这是我认为你想做的解决方案：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;
}

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

Answer 4

有关详细信息，请参阅此forum link

HTML

<div class="item">
    <div class="subitem">Ready</div>
    <div class="subitem">Ready</div>
    <div class="subitem">Maintenance</div>
</div>
<div class="statusRollup">
    <p>Subitem 1: Nothing to report</p>
    <p>Subitem 2: Nothing to report</p>
    <p>Subitem 3: Scheduled maintenance</p>
</div>

的jQuery

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

$(function () {
    $('.subitem').attr('title', $('.statusRollup').remove().html())
    $(document).tooltip();
});

选中此fiddle

Answer 5

这是纯HTML和CSS

HTML

<div style="z-index:2">
    abcd
    efgh
</div>
<div style="z-index:1">
    ijkl
    mnop
</div

CSS

div{
    position:absolute;/*this is necessary.*/
    color:white;

    width:250px;
    height:250px;
    display:inline-block;
    border-radius: 10px;
    margin:10px;
    background:#2E2922;
    vertical-align:top;
}
div:hover+div, div:hover
{
    float:left;
    position:relative;
}

FiddleDemo

2个div在一个地方

5 个答案:

演示

代码

这是纯HTML和CSS

HTML

CSS