0

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

例如，假设我有两个 DIV：

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

Box 1 应该显示在页面上，box1-hover 隐藏，然后，当您将鼠标悬停在 box 1 上时，box1-hover 应该在它的顶部可见（所以它基本上看起来像一个交换）。然后当您鼠标移出时，box1-hover 再次隐藏。

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

谢谢扎克

4

2 回答 2

4

当然。您需要调查.mouseenter、.mouseleave、.show和.hide。下面的代码应该可以让您大部分时间到达那里。

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

对于 CSS，您需要了解z-indices和相对定位中的绝对定位。Z 索引指示元素在页面中的“高度”（将事物视为向您走来）。相对定位项中的绝对定位项绝对定位在父项而不是页面上。

需要的 CSS：

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

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

请注意，在此实例box1-hover中嵌套了 divbox1

看到它在行动

于 2011-04-08T13:31:17.390 回答
1

看：http: //jsfiddle.net/uQuTt/

于 2011-04-08T13:32:19.623 回答