懸停在一個div上時如何顯示更多div？

Question

我正在嘗試解決將鼠標懸停在一個div上時如何顯示更多div的問題。

我知道將鼠標懸停在同一div上時如何顯示其變化，但是將鼠標懸停在一個div上時如何顯示更多div？

以此為例：

http://jsfiddle.net/j4LFD/

當您將鼠標懸停在該框上方時，我該如何做呢？

我不確定是否可以使用CSS或需要JavaScript？

謝謝！

詹姆士

Answer 1

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

Answer 2

據我所知，沒有Java語言是不可能的，我建議使用jQuery，因為它會使您的生活變得更加輕松。 如果您只想顯示div，則可以執行以下操作

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

然后在javascript中

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

如果您確實想將其添加到懸停狀態，則可以使用jquery .append（）函數（http://api.jquery.com/append/）

編輯 ：好的，很清楚看到sandeep的答案在CSS中是可能的，但是，這仍然是您在JS中實現的方法:-)

Answer 3

CSS解決方案：使用父/容器div。

http://jsfiddle.net/samliew/j4LFD/4/

Answer 4

您也可以使用原始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;
}

Answer 5

您可以偽造它，使用該框隱藏第二個框，並使用邊框作為框， http：//jsfiddle.net/j4LFD/3/