悬停在一个div上时如何显示更多div？

Question

I am trying to work out how to show more divs when hovering over one div.

I know how to show changes of the same div when hovering over it but how can I show more divs when hovering over one div?

Take this as an example:

http://jsfiddle.net/j4LFD/

How can I make it so when you hover over the box another box appears next to it?

Im not sure if this can be done with css or needs javascript?

Thanks!

James

Answer 1

You can do it with css like this:

.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;  
}

Check this example http://jsfiddle.net/j4LFD/1/

Answer 2

To my knowledge it's not possible without Javascript, and I'd recommend using jQuery because it will make your life a lot easier. If you just want to show a div then you can do something similar to

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

Then in the javascript

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

If you actually want to add it dive on hover then you can use the jquery .append() function (http://api.jquery.com/append/)

Edit : Ok seeing sandeep's answer it clearly is possible in CSS, but still, this is how you'd do it in JS :-)

Answer 3

CSS solution: Use a parent/container div.

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

Answer 4

You can also do this with vanilla Javascript (no JQuery) and without having your elements be adjacent siblings. Example fiddle: 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/