James
James

Reputation: 1925

How to make more divs appear when hovering over one div?

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?

Upvotes: 0

Views: 8425

Answers (5)

Ben
Ben

Reputation: 10104

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

Upvotes: 0

Andrew
Andrew

Reputation: 13853

You can fake it, use the box to hide the second box and the border to be the box,http://jsfiddle.net/j4LFD/3/

Upvotes: -1

Samuel Liew
Samuel Liew

Reputation: 79022

CSS solution: Use a parent/container div.

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

Upvotes: 1

Ben
Ben

Reputation: 1787

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 :-)

Upvotes: 2

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 7

Related Questions