Reputation: 1925
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;
}
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
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
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
Reputation: 79022
CSS solution: Use a parent/container div.
http://jsfiddle.net/samliew/j4LFD/4/
Upvotes: 1
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
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