2011-11-15 91 views
0

我想解決如何顯示更多divs時懸停在一個div。如何讓更多的div出現時,懸停在一個div?

我知道如何在懸停時顯示同一div的更改,但如何在懸停在一個div上時顯示更多div?

拿這個作爲一個例子:

http://jsfiddle.net/j4LFD/

我怎樣才能使它所以當你將鼠標懸停在箱旁會出現另一個對話框?

我不確定這是否可以用CSS或需要JavaScript來完成?

謝謝!

詹姆斯

+0

你需要什麼,你撥弄沒有做? –

回答

7

您可以用CSS這樣做:

.box , .appear{ 
background: #151515; 
height: 100px; 
width: 100px; 
    float:left; 
} 
.appear{ 
    background:red; 
    display:none 
} 
.box:hover{ 
    background: #e6e6e6; 
height: 100px; 
width: 100px; 
} 
.box:hover + .appear { 
    display:block; 
} 

檢查這個例子http://jsfiddle.net/j4LFD/1/

+0

嘿謝謝!正是我想要的!我把它作爲時間限制結束時的最佳答案! – James

+0

很棒的回答。我在哪裏可以找到關於CSS中所有不同的搖搖晃晃的東西的信息,例如.box + .appear(你知道,+和>等等)。我知道docs在W3C,但我還沒有在那裏找到這個信息 –

2

據我所知,這是不可能沒有JavaScript,我建議你使用jQuery,因爲它會讓你的生活變得更容易。如果你只是想顯示一個div,那麼你可以在JavaScript

$('#div1').mouseover(function(){ 
    $('#div2').show(); 
}) 
$('#div1').mouseout(function(){ 
    $('#div2').hide(); 
}) 

做同樣的事情到

<div id="div1">First Div</div> 
<div id="div2" style="display:none">Second Div</div> 

然後如果你真的想要增加潛水懸停那麼你可以使用jQuery的。追加()函數(http://api.jquery.com/append/)

編輯:好眼見Sandeep的答案很清楚,可以在CSS中,不過,這是你如何做到這一點的JS :-)

0

您也可以與香草的Javascript(無JQuery的),並做到這一點,而無需你的元素是相鄰的兄弟姐妹。例如小提琴:http://jsfiddle.net/3nxfG/

HTML/JS:

<div id="box1" class="box"></div> 
<div id="box2" class="box hidden"></div> 
<script type="text/javascript"> 
var box1 = document.getElementById('box1'); 
box1.onmouseover = function() { 
    var box2 = document.getElementById('box2'); 
    box2.style.visibility = 'visible'; 
}; 
box1.onmouseout = function() { 
    var box2 = document.getElementById('box2'); 
    box2.style.visibility = 'hidden'; 
}; 
</script> 

CSS:

.box { 
background: #151515; 
height: 100px; 
width: 100px; 
float: left; 
} 

.hidden { 
    visibility: hidden; 
} 
+0

是的,但誰真的想'沒有'jQuery? :p – Ben

相關問題