Question

将鼠标悬停在div上时，是否可以执行交换或显示/隐藏？

例如，假设我有两个DIV：

<div id="box1">content of box 1</div>
<div id="box1-hover">you are hovering on this box</div>

框1应该显示在页面上，其中隐藏了box1-hover，然后，当你将鼠标悬停在方框1上时，box1-hover应该变得可见超越它（所以它基本上看起来像交换）。然后当你使用mouseout时，box1-hover会再次隐藏。

这可行吗？如果是这样，有人可以用jsfiddle演示吗？

由于扎克

Answer 1

不确定。您需要调查.mouseenter，.mouseleave，.show和.hide。下面的代码可以帮助你完成大部分工作。

$(document).ready(function() {
    $("#box1").mouseenter(function() {
        $("#box1-hover").show();
    }).mouseleave(function() {
        $("#box1-hover").hide();
    });
});

对于CSS，您需要了解z-indices和absolute positioning inside relative positioning。 Z索引表示页面中元素的“高”（想想事情正在向你走来）。相对定位的项目中绝对定位的项目绝对位于父而不是页面。

所需的CSS：

#box1 {
    z-index: 2;
    float: left;
    position: relative;
}

#box1-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

请注意box1-hover的div在此实例中嵌套在box1

see it in action

Answer 2

外观： http://jsfiddle.net/uQuTt/

jQuery - 在Mouseover上交换DIV

2 个答案: