Question

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

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

有问题的网站是www.faa.net.au的主页。

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

Answer 1

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

然后使用jQuery的.hover（）方法在mouseover上显示适当的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/

希望有所帮助。

Answer 2

另一个论坛的朋友刚刚发布了另一种方式。请注意它只是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

Answer 3

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

HTML：

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

和CSS：

#descriptive
{
visibility:hidden;
}

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

基本上这会在id="descriptive"悬停时显示带有id="service"的DIV。

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

3 个答案: