jquery - 如何在悬停在另一个 DIV 上时显示一个 DIV？

Question

我知道这种情况有多种变体，但我一直在努力让它发挥作用。

我正在尝试一些非常接近 Yellowpages.com 的东西，只需搜索比萨饼或任何与此相关的内容即可获得填充结果。

请注意“DIV”是如何在每个单独元素的悬停上显示的？每个列表底部的操作？我需要这样做。我有一个非常相似的项目，我正在处理基于数据库内容创建列表。

最好的解释方法是，当我将鼠标悬停在整个列表的主容器上时，是否能够更改“页脚”的 z-index。

这是我在这个网站上的第一篇文章。非常感谢您的帮助。

Answer 1

在 jQuery 中很容易做到这一点。要显示或隐藏 div，您可以使用：

$(".moreInfoDiv").show();
$(".moreInfoDiv").hide(); 

当然假设你已经定义了你的 div

<div class="div1">
<div class="moreInfoDiv">

所以你的最终代码显示看起来像这样

$('.div1').hover(
    function() {
       $(".moreInfoDiv").show();
    },
    function() {
        $(".moreInfoDiv").hide();
    }
);

Answer 2

像这样：

$(function(){
  $('#div1').hover(function(){
    $('#div2').css('z-index', '10');
  }, function(){
    $('#div2').css('z-index', '0');  
  });       
});

这是一个工作 jsFiddle 的示例，显示悬停时的 z-index 变化。