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 CSS as an example:

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

.box:hover {
    background: #e6e6e6;
 height: 100px;
 width: 100px;  
}

http://jsfiddle.net/j4LFD/

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

Can this be done with CSS or does it need JavaScript?

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/