javascript - 新的 DIV 出现在另一个 Div 的悬停/鼠标悬停上

Question

我有许多 DIV 目前以椭圆形排列。每个 div 代表一个“服务”并相应地进行 ID，所有都设置有绝对位置。

我想做的是将鼠标悬停在一个 div 上，我希望在中间显示一个包含相关信息的新 DIV。每个“服务”都应该发生这种情况，因此每个“描述性”div 都将隐藏，直到鼠标悬停但都出现在同一空间中。

相关网站是 www.faa.net.au 的主页。

如何让这个新的描述性 DIV 在鼠标悬停时显示并在鼠标移开时隐藏？

Answer 1

您可以做的是使用 CSS 将所有这些 div 放置在中间那个位置。它们可以堆叠并且 z-index 无关紧要，因为您一次只能看到一个。然后在您的 CSS 中使用“display:none”隐藏它们。

然后使用 jQuery 的 .hover() 方法在鼠标悬停时显示相应的 div

$("#idOftheDivYouHoverOn").hover(function (e) {
     //This funciton defines what happens on mouse-in or hover.

     $("#idOfTheDefaultCenterDiv").hide();
     $("#idOfTheDivYouWantedToShow").show();


}, function (e) {
    //This function defines what happens on mouse-out or when the hover is over.
    $("#idOfTheDefaultCenterDiv").show();
     $("#idOfTheDivYouWantedToShow").hide();

});

您必须为您悬停的每一个执行此操作。有一种“更聪明”的方法，但解释它会是一个很长的答案。

也就是说，如果您想使用 JavaScript/jQuery 而不是类似于您在其他答案中看到的纯 CSS 来执行此操作。使用此方法，您可以添加淡入淡出效果 - 看看 jQuery 的悬停 - http://api.jquery.com/hover/

编辑:这是一个工作示例:http://jsfiddle.net/6dMDS/

希望对您有所帮助。