Question

我正在尝试一个非常简单的事情，隐藏/显示信息div我的鼠标悬停在另一个元素上。我的代码结构类似于：

<div class="divRow">
    <div class="divColumn">
        <div class="divInfo">Info</div><a href=""><img src="" /></a></div>
        <div class="divInfo">Info</div><a href=""><img src="" /></a></div>
        <div class="divInfo">Info</div><a href=""><img src="" /></a></div>
    </div>
</div>

显示图像，并且应该有一个空格，我希望在其中显示divInfo。

我使用以下jQuery代码来显示/隐藏：

$(function() {
      $('.divInfo').hide();
      $('.divColumn').hover( function() { $('.divInfo').toggle(); } );
});

当然，这样可行，但一次显示/隐藏行中的所有3个div。我希望能够分别隐藏每个人......

这可以使用类吗？或者我必须为每个使用不同的唯一ID？

我想要的功能在这里显示，但我不知道该怎么做。：）

http://www.therice-co.com

问候并感谢

Answer 1

$('.divColumn').children('a').hover(function () { // bind it to exact image
    $(this).prev('.divInfo').toggle(); // show previous div
});

将起作用

<强> jQuery DEMO

但你定义的关闭</div> s

太多了

如果你将每个信息和图像包装在单独的div中并在其上使用:hover，你也可以用纯CSS做到这一点

<强> PURE CSS DEMO

Answer 2

这就是你想要实现的目标

enter image description here

请参阅http://jsfiddle.net/j0aoy47L/

的Javascript

<script>
$(function() {
   $('.divInfo').hover( function() {
         $(this).find('.info').toggle(); 
   } );
});
</script>

CSS

    <style>
  .info{
    display: none;
    text-align: left;
  }
  .divInfo{
    background: #fcfcfc;
    border:1px solid #e5e5e5;
    width:360px;
    height:200px;
    position: relative;
    margin-bottom: 10px;
    text-align: center;
    padding:10px;
  }
  .divInfo img{
    position: absolute;
    bottom: 9px;
    left: 19px;
  }
</style>

HTML

<div class="divRow">
<div class="divColumn">
    <div class="divInfo">
       <div class="info"><h4>Image Caption</h4> <p>Some image information</p></div> 
       <img src="http://placehold.it/350x100/addd" />
    </div>
    <div class="divInfo">
       <div class="info"><h4>Image Caption</h4> <p>Some image information</p></div> 
       <img src="http://placehold.it/350x100/addd" />
    </div>
    <div class="divInfo">
       <div class="info"><h4>Image Caption</h4> <p>Some image information</p></div> 
       <img src="http://placehold.it/350x100/addd" />
    </div>
</div>

Answer 3

实际上你希望div总是在那里，但是当你没有徘徊它们时，某种程度上“不可见”。这很简单：

.divInfo:not(:hover){
    opacity: 0;
}

Fiddle

使用相同的类名单独显示/隐藏div

3 个答案: