0

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

我想要做的是鼠标悬停在一个 div 上，我想让一个带有相关信息的新 DIV 出现在中间。这应该发生在每个“服务”上，因此每个“描述性”div 将被隐藏，直到鼠标悬停，但都出现在同一个空间中。

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

如何让这个新的描述性 DIV 在鼠标悬停时出现并在鼠标悬停时隐藏？

4

3 回答 3

2

您可以做的是使用 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/

希望有帮助。

于 2012-10-23T01:54:17.013 回答
0

另一个论坛的朋友刚刚发布了另一种方法。请注意，它只是 CSS3，因此某些浏览器（肯定是较旧的 IE）将不支持它。

<div class="container">

<img class="one" src="http://placehold.it/100x100" />
<img class="two" src="http://placehold.it/100x100" /><br>
<img class="three" src="http://placehold.it/100x100" />
<img class="four" src="http://placehold.it/100x100" /><br>
<img class="five" src="http://placehold.it/100x100" />
<img class="six" src="http://placehold.it/100x100" />


<div class="hidden-one">hidden-one</div>
<div class="hidden-two">hidden-two</div>
<div class="hidden-three">hidden-three</div>
<div class="hidden-four">hidden-four</div>
<div class="hidden-five">hidden-five</div>
<div class="hidden-six">hidden-six</div>

</div>

* {margin: 0; padding: 0;}

.container {width: 400px;}

.one:hover ~ .hidden-one,
.two:hover ~ .hidden-two,
.three:hover ~ .hidden-three,
.four:hover ~ .hidden-four,
.five:hover ~ .hidden-five,
.six:hover ~ .hidden-six
{display: block;}


.hidden-one,
.hidden-two,
.hidden-three,
.hidden-four,
.hidden-five,
.hidden-six
{
width: 200px;
height: 300px;
border: 1px solid red;
display:none;
float: right;
position: relative;
top:-305px;
left: 10px;
}

http://codepen.io/anon/pen/LbfCl

于 2012-10-23T16:10:50.050 回答
-1

所以如果我做对了，你就会得到一个“服务”DIV 和一个“描述性”DIV。尝试一些 CSS 来实现它。

HTML：

<div id="service"></div>
<div id="descriptive"></div>

和 CSS：

#descriptive
{
visibility:hidden;
}

#service:hover #descriptive
{
visibility:visible;
}

基本上，这将使 DIV在悬停id="descriptive"时显示。id="service"

于 2012-10-23T01:54:12.897 回答