Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

on hover of a div, have 3 smaller divs appear.

J

jonpeter

macrumors member
Original poster
Sep 19, 2013
42
0
MI
So i have a rectangle, 100% width of the page, and a height of 115 or so.
On hovering, the box expands to a height to 225.

How, through CSS code, can i get 3 smaller divs to appear in the hover box of 225 height and 100% width?

Thanks!
 
jonpeter said:
So i have a rectangle, 100% width of the page, and a height of 115 or so. On hovering, the box expands to a height to 225. How, through CSS code, can i get 3 smaller divs to appear in the hover box of 225 height and 100% width? Thanks!
Click to expand...

That was kind of vague so below is tested example code in simple CSS (well supported across browsers) that does what you want but does not deal with how to handle the content in the container div once the hover is in effect nor does it deal with placement for the smaller divs. I set simple widths and floated them so they render sensibly.

Code: 
<html>
<head>
<title>Testing</title>

<style>

div {border: 1px inset red}
div#a, div#b, div#c {display: none; height: 100px; float: left}
div#container {height: 100px}
div#container:hover {height: 125px;}
div#container:hover div {display: inline}

</style>

</head>
<body>

<div id="container">

  Content for div container

  <div id="a">Content for div a</div>
  <div id="b">Content for div b</div>
  <div id="c">Content for div c</div>

</div>

</body>
</html>

Important:

This method assumes, of course, the HTML includes all 4 div's, I just hide the 3 until the hover event. Javascript should be used to manipulate the DOM if you need to dynamically add the 3 div's inside the container on hover. Also, and if anyone followup is considering using :before, :after or + or ~ in selectors with "content:" please be reminded that older browsers lack support for some, or HTML is not for content insertion using only CSS. My way is certainly not the only way, but be cautious posting CSS that is not reliably supported or considered a CSS hack.
 
I've included screenshots in this followup reply to demonstrate the before and after (hover) affects using the code I posted above.
 

Attachments

  • before.jpg
    before.jpg
    13.3 KB · Views: 246
  • after.jpg
    after.jpg
    21.2 KB · Views: 234
http://jsfiddle.net/6wd7s/1/


so here is the code section i am working on. why is it that when i hover over my box, i dont have 3 white divs appear within it?

I'm missing code, but i dont know where.

and if you dont mind, could you explain the "hover div" section of the code. I have never seen that before. Does the simply mean to display any div mentioned in code inside the parent div, on a hover?
 
Last edited:
http://jsfiddle.net/6wd7s/8/

first: no space between #two and :hover in your CSS declaration.

second: this "#two:hover div" targets all divs on the page when you hover over #two.

third: you want to display those a, b, c divs as inline-block, not just inline (they don't have any content and you want to control their height too).
 
Fantastic advice, thanks for joining in to help.

Learning CSS selector syntax can be tricky to newbies -- dots, hyphens, spaces, etc. and the sequence matters, i.e.

"#two:hover div.a" vs. "#two:hover div a"

The first targets a div with the class named "a" which is contained by a parent element with ID named "two" when hovered. The second targets a div that contains an anchor tag which is contained by a parent element with ID named "two" when hovered. Fun, huh?

:eek:

http://www.w3schools.com/cssref/css_selectors.asp <--- Learn, absorb
 
matpb said:
http://jsfiddle.net/6wd7s/8/

first: no space between #two and :hover in your CSS declaration.

second: this "#two:hover div" targets all divs on the page when you hover over #two.

third: you want to display those a, b, c divs as inline-block, not just inline (they don't have any content and you want to control their height too).
Click to expand...

exactly what i was looking for! the example was perfect just as well.

Follow up question... how would i evenly split up the 3 div across the width of the page? Also, how would i center a header?
 
jonpeter said:
Follow up question... how would i evenly split up the 3 div across the width of the page? Also, how would i center a header?
Click to expand...

Both, tested/working:

Code: 
<html>
<head>
<title>Centered header and 3 div equal width in dynamic container</title>

<style>

body {margin: 0}

#header-container {
border: 1px inset red;
width: 100%;
}
#header-inner {
margin: 0px auto;
text-align: center;
font: bold 24px arial;
background-color: yellow;
}

.xouter3{
width:100%;
border:1px inset #000;
float:left;
}
.xleftcol3{
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol3 {
overflow:hidden;
background:#eff2df;
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}

.xrightcol3 {
float:right;
width: 33%;
background:#d2da9c;
position:relative;
}

</style>

</head>
<body>

<section id="header-container">
 <div id="header-inner">This is a Header</div>
</section>

<div class="xouter3">
	<div class="xleftcol3"><p>This is the left col </p></div>
	<div class="xrightcol3"><p>This is the rightcol : </p></div>
	<div class="xmiddlecol3">
		<div class="xinner3"><p>This is the middlecol: </p></div>
	</div>
</div>

</body>
</html>

Notes on 3 col width:

Some people advocate using "display: table-cell" but "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

There is no single or perfect method for CSS equal column widths for all browsers. BTW, many good responsive themes have 3 col layouts using the 960grid system or adjustable -- look into that if you need mobile support.

Notes on centering header:

In a nutshell, "margin: 0 left" combined with "text-align: center" is a cross-browser compatible solution. I prefer to use section tags for naming regions and using containers to ensure proper alignment and flow.

I have attached a screenshot for ya.

:cool:
 

Attachments

  • Center header and 3 equal div full width.jpg
    Center header and 3 equal div full width.jpg
    61.7 KB · Views: 298
Display Property

Another simple way to go about it is having the smaller divs with the:

Code: 
<div id="mydiv" style="display:none;">

and upon hover, just call a javascript function and do this to view the div:

Code: 
document.getElementById("mydiv").style.display = "block";
 
BlabBen said:
Another simple way to go about it is having the smaller divs with the:

Code: 
<div id="mydiv" style="display:none;">

and upon hover, just call a javascript function and do this to view the div:

Code: 
document.getElementById("mydiv").style.display = "block";
Click to expand...

No offence, but this is bad advice. If you can do it solely with CSS, don't do it with Javascript.

And if you've got to do it with Javascript, don't do it with inline Javascript.
 
Hey

NutsNGum said:
No offence, but this is bad advice. If you can do it solely with CSS, don't do it with Javascript.

And if you've got to do it with Javascript, don't do it with inline Javascript.
Click to expand...

Hey, no offence taken. Using only css is the way to go about it its true.

Actually the div style can be placed in a css file instead and the javascript in a js file obviously.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back