Question

我必须把盒子放在彼此的顶部，如果有人在它上面盘旋，我想隐藏上面的盒子。 HTML：

<div id="left_middle">
<div id="rfinder_UP"></div>
<div id="rfinder_DWN"></div>
</div>

CSS：

#left_middle {
position:relative;
float: left;
width: 235px;
min-height: 220px;
background:green;
margin-right: 10px;
 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

}

#rfinder_UP, 
#rfinder_DWN {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

#rfinder_DWN{
background: url(images/rfinderapp_DWN.png) no-repeat;

}

#rfinder_UP {

    background: url(images/rfinderapp_UP.png) no-repeat;
  z-index: 10;
}

JS

$(document).ready(function(){
$("#rfinder_UP").mouseover(function(){
  $("#rfinder_UP").hide();
  });
$("#rfinder_DWN").mouseout(function(){
  $("#rfinder_UP").show();
  });
});

现在我想通过不仅用.hide隐藏上部div来实现这一点，但不知何故从底部将它拉出left_middle div。是否有捷径可寻？我尝试了许多不同的其他jQuery效果，如animate，slideDown等，但找不到可行的解决方案。

提前致谢！

我在这里创建了一个jsFiddle：http://jsfiddle.net/qEcp8/ 红色框在悬停时消失，显示黑色框。我想要的是红色的那个从左侧中间框滑下来。

Answer 1

试试这个：

#rfinder_UP:hover {
    display:none;
}

Answer 2

$( "#rfinder_UP" ).hover(function() {

  $('#rfinder_DWN').animate({height:"100%"});
}, function() {
  $('#rfinder_DWN').animate({height:"0"});

}
);

DEMO：http://jsfiddle.net/EyVd6/1/

请检查整个代码，我已相应更改了您的html和CSS ...

jQuery从父div中拉出div

2 个答案: