在悬停时显示DIV，但悬停在另一个DIV上。随着CSS

我试图得到它，所以当我将鼠标悬停在DIV另一个DIV显示在该DIV内，但在当前的内容。所以如果我有一个500像素×500像素的DIV，并且显示了书的封面，当我将它悬停在它上面时，另一个90％90％的父DIV将出现在其中，显示书的详细信息，但在书的封面上。在悬停时显示DIV，但悬停在另一个DIV上。随着CSS

到目前为止，所有我设法做的就是申报单上出现徘徊，但他们添加到父拉伸内，使滚动条等

我一直在使用显示器的尝试：none和显示：块和可见性隐藏，并搜索加载，但似乎都不允许在当前内容上显示DIV。

这个小提琴是最近我可以得到的，但它不会超过主DIV中的内容，也不局限于主DIV。 http://jsfiddle.net/vereonix/kPPFv/

*{ 
    margin:0; 
    padding:0; 
} 
#content{ 
    height:100%; 
    width:100%; 
    background-color: #CCCCCC; 
    padding:0; 
    margin:0; 
    position:absolute; 
} 
#hoverbar{ 
    height:90%; 
    width:90%; 
    background-color: #666; 
    position:absolute; 
    visibility:hidden; 
    margin-left: 5%; 
    margin-top: 5%; 
} 
#content:hover > #hoverbar{ 
    visibility:visible; 
} 

<div id="content"> 
    image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br> 
    <div id="hoverbar"> 
     details 
    </div> 
</div>

沿着这个网站的东西线：http://studionudge.com/

我遗憾的是没有得到任何当前的代码显示，我只是想小规模的测试，以找到一个解决方案。我试过的东西，如从这些SOF问题的答案：

Using only CSS, show div on hover over <a>

CSS On hover show another element

但没有提供一个结果，我觉得我可以工作。

我觉得我可能需要使用模式框获取元素类型的交易，虽然我从来没有做过悬停，只有onclick。

希望这个问题是有效的，我很想得到这方面的工作 - 汤姆

来源

2013-12-10 Vereonix

查看http://stackoverflow.com/questions/20465386/display-another-div-when-someone-hover-over-a-div – tewathia

您可以使用position属性是这样的：

的Html

<div class="book"> 
    <div class="info">More info here</div> 
    <div class="image"> 
     Image here 
    </div> 
</div>

CSS

.book { 
    position:relative; 
} 
.info { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
    display:none; 
} 
.book:hover .info{ 
    display:block; 
}

演示http://jsfiddle.net/6ReTK/10/

为了让你可以使用jQuery 0有一定的影响种方法或使用CSS转换：

info { 
    transition:opacity 1s; 
    opacity:0; 
} 
.book:hover .info{ 
    opacity:1; 
}

另一个演示http://jsfiddle.net/6ReTK/12/

来源

2013-12-10 15:24:25 DaniP

非常感谢你，很高兴知道我不远处，也非常感谢律'淡出'。 – Vereonix

很高兴帮助你配对 – DaniP

对不起，现在这样一个简单的问题，但我无法弄清楚什么控件究竟是如何淡化信息DIV是完全出现时。我把rbg挂上了白色，并且它变得坚固，有没有办法让它稍微褪色而不是黑色？ – Vereonix

margin-top和margin-left举动甚至绝对定位的元素只是相对于在DOM的当前位置。 top，left，right和bottom是移动绝对定位元素的CSS规则。如果你在你的小提琴中加入top: 0; left 0;，你会得到我认为是你描述的行为。

来源

2013-12-10 15:24:13

啊，所以我几乎在那里，我还是新的并混淆了一些事情的工作方式。 – Vereonix

你只需要添加绝对定位坐标：top:0和left:0。小提琴在这里：http://jsfiddle.net/kPPFv/2/

来源

2013-12-10 15:29:54 n1kkou

在悬停时显示DIV，但悬停在另一个DIV上。随着CSS

回答

相关问题