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

Discussion in 'Web Design and Development' started by jonpeter, Oct 12, 2013.

  1. jonpeter macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
    #1
    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!
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    I've included screenshots in this followup reply to demonstrate the before and after (hover) affects using the code I posted above.
     

    Attached Files:

  4. jonpeter thread starter macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    :confused:

    (sigh)
     
  6. jonpeter, Oct 15, 2013
    Last edited: Oct 15, 2013

    jonpeter thread starter macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
    #6
    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?
     
  7. matpb macrumors newbie

    Joined:
    Jul 26, 2012
    #7
    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).
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    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
     
  9. jonpeter thread starter macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
    #9
    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?
     
  10. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    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:
     

    Attached Files:

  11. dellmerca macrumors newbie

    Joined:
    May 11, 2014
  12. BlabBen macrumors newbie

    BlabBen

    Joined:
    May 12, 2014
    Location:
    Malta
    #12
    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";
     
  13. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #13
    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.
     
  14. BlabBen macrumors newbie

    BlabBen

    Joined:
    May 12, 2014
    Location:
    Malta
    #14
    Hey

    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.
     

Share This Page