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

我有一些DIV目前摆放在椭圆形状中。每个div代表一个“服务”并相应地标识，全都设置为绝对位置。新DIV出现在另一个DIV的悬停/鼠标悬停上

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

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

我该如何着手使这个新的描述性DIV出现在鼠标悬停上并隐藏在鼠标上？

来源

2012-10-23 sampotts

我不知道这是正确的解决方案，但我在过去这做的是创建'div's你是想，只是让他们隐藏。在元素的'mouseover'上，你可以简单地替换中心div的'.html（）'。 – Jared

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

然后使用jQuery的.hover（）方法来显示鼠标悬停

$("#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(); 

});

那些合适的div你必须为你悬停在每一个做到这一点。有一种“更聪明”的方式，但解释它会是一个很长的回答。

这就是如果你想使用JavaScript/jQuery而不是仅仅使用这个普通的CSS，你可以在其他答案中看到。通过这种方法，您可以添加淡入淡出效果 - 看看jQuery的悬停 - http://api.jquery.com/hover/

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

希望有所帮助。

来源

2012-10-23 01:54:17 tbwiii

在给出的3个答案中，这是唯一一个能够以你想要的方式实际工作的人，或者对于这个问题。 –

好吧，我不太清楚我在这里失去了什么，或者我做了一些完全错误的事情，但我似乎无法让它工作？我创建了一个名为serviceHover的JS文件。js我已经链接了我的模板，然后暂时分配了其中一个服务，但没有任何事情发生。我不是最好的，但我想我错过了一些东西！ – sampotts

不知道如果我通过包含另一个DIV而使其过于复杂，但我试图让它工作，并且不能如此阅读上面的脚本，我认为我需要一个额外的centreDiv，这是正确的还是我只是把它搞砸了？大声笑 – sampotts

-1

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

HTML：

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

和CSS：

#descriptive 
{ 
visibility:hidden; 
} 

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

基本上，这将与id="descriptive" div时id="service"悬停显示。

来源

2012-10-23 01:54:12

O.o不...不，不会。 CSS不是那样的条件。 http://jsfiddle.net/calder12/FZApK/ –

在另一个论坛的朋友刚刚发布了另一种方式做到这一点。被警告它只是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-23 16:10:50

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

回答

相关问题