我想解決如何顯示更多divs時懸停在一個div。如何讓更多的div出現時,懸停在一個div?
我知道如何在懸停時顯示同一div的更改,但如何在懸停在一個div上時顯示更多div?
拿這個作爲一個例子:
我怎樣才能使它所以當你將鼠標懸停在箱旁會出現另一個對話框?
我不確定這是否可以用CSS或需要JavaScript來完成?
謝謝!
詹姆斯
我想解決如何顯示更多divs時懸停在一個div。如何讓更多的div出現時,懸停在一個div?
我知道如何在懸停時顯示同一div的更改,但如何在懸停在一個div上時顯示更多div?
拿這個作爲一個例子:
我怎樣才能使它所以當你將鼠標懸停在箱旁會出現另一個對話框?
我不確定這是否可以用CSS或需要JavaScript來完成?
謝謝!
詹姆斯
您可以用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;
}
嘿謝謝!正是我想要的!我把它作爲時間限制結束時的最佳答案! – James
很棒的回答。我在哪裏可以找到關於CSS中所有不同的搖搖晃晃的東西的信息,例如.box + .appear(你知道,+和>等等)。我知道docs在W3C,但我還沒有在那裏找到這個信息 –
據我所知,這是不可能沒有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 :-)
CSS解決方案:使用父級/容器div。
您可以僞造它,使用複選框以隱藏第二個框和邊框是框,http://jsfiddle.net/j4LFD/3/
您也可以與香草的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;
}
是的,但誰真的想'沒有'jQuery? :p – Ben
你需要什麼,你撥弄沒有做? –