SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display div when hovering over another

    I'm about to pull my hair out here...

    I'm trying to get the <div class="company_info"> to appear when I hover over the .aboutSquares .company

    Below is HTML and CSS. Not sure what I'm doing wrong here. Thanks

    HTML Code:
    		   <div id="squareWrapper">
    		   
    	   		   <div class="aboutSquares">
    	   		   		<h2>COMPANY</h2>
    	   		   		<a href="#"><span class="company"><!--Image Replacement --></span></a>  		   
    	   		   </div>
    	
    	   		   <div class="aboutSquares">
    	   		   		<h2>MARKET</h2>
    	   		   		<a href="#"><span class="market"><!--Image Replacement --></span></a>  		   
    	   		   </div>
    	   		   
    	   		   <div class="aboutSquares">
    	   		   		<h2>STAFF</h2>
    	   		   		<a href="#"><span class="people"><!--Image Replacement --></span></a>  		   
    	   		   </div>
    	   		   
    	   		   <div class="aboutSquares">
    	   		   		<h2>SERVICE</h2>
    	   		   		<a href="#"><span class="service"><!--Image Replacement --></span></a>  		   
    	   		   </div>
       		   
    		   </div>
    
    		   <div class="company_info">
    		   		<h3>COMPANY</h3>
    			  <p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    		   </div>
    Code:
    .aboutSquares .company:hover + .companyInfo{
    	display: block;
    }
    
    .company_info{
    	width: 75%;
    	margin: 0 auto;
    	text-align: justify;
    	padding: 40px;
    	color: white;
    	font-size: 11pt;
    	font-weight: 400;
    	line-height: 1.5em;
    	background: #5b3c00;
    	
    	display: none;
    	
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You won't be able to make .company_info appear by hovering over .company with your current HTML structure. .company_info would have to be inside .company for that to work. So you can either restructure the HTML or use JS.

    However, the link currently has no height, so couldn't be hovered over anyhow, so that's another consideration.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info.

    Why can't the link take the height and width from the span that sits inside of it?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bades View Post
    Why can't the link take the height and width from the span that sits inside of it?
    Because there's nothing inside the span. Are you planning to put something in there? That will make a difference. I see you've written "image replacement" in there, so if you place an image there, that will be fine.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I might have to use JS. If I put that hidden DIV inside the other it takes all the attributes of that DIV and I don't want it to, seems like it would be too much trouble.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, that code looks the same as before. When posting an example, put it all together so we can test it, using a template like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    </html>
    As I mentioned, though, you won't easily be able to get that div at the bottom to appear by hovering over the .company link. You could make it appear on click, using ::target, but that won't work in older browsers. To make it appear on hover, you'd have to place the contents inside the span, and then possition the content at the bottom of your page, but it will get messy and unrelaible. E.g.

    Code:
    <div class="aboutSquares">
        <h2>COMPANY</h2>
        <a href="#">
            <span class="company">
                 <div class="company_info">
    		    <h3>COMPANY</h3>
    		    <p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
                 </div>
            </span>
        </a>  		   
    </div>

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This worked nicely!

    Code:
    <script>
    $(document).ready(function(){
      $("span").click(function(){
        $(".company_info").toggle();
      });
    });
    </script>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yep, JS is the more common way to go here. Just watch out for those with JS off. Can they access the content? That's why I prefer to set display: none via JS itself, so that, when it fails, the content will still be shown.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I dont think .js is necessary in this case. What you need here is to make .aboutSquares siblings with your .company_info.. so you will need to rethink your coding and structuring strategy.
    * we can assume since there will be image replacement that each about square will be the same height.
    * The HS are kinda a bad idea, and anyway, the tag isn't necessary here.
    * you can replace the background colors with your images. ( tho technically speaking you can just use content:url(your/image/path.jpg) just as well)

    Code:
    		<style type="text/css">
    		.info{display:none; overflow: hidden; padding-left:1em}
    		.aboutSquares { float:left; height:125px;  width:125px; background: pink; overflow:hidden; position: relative}
    		.aboutSquares a:after{ content:''; position: absolute; height:100%; width:100%; top:0; left:0;  }
    		 div.company a:after{ background:  red}
    		 div.market a:after{ background:  pink}
    		 div.staff { clear:left;}
    		 div.staff a:after{ background: orange}
    		 div.service a:after{ background: aqua}
    
    
    		 div.company:hover~ .company_info,div.market:hover~ .market_info,div.staff:hover~ .staff_info,div.service:hover~ .service_info{display:block;}
    
    		 	</style>
    		
    		
    		   <div id="squareWrapper">
     	   		   <div class="aboutSquares company"><a href="#">COMPANY  </a></div>
     	   		   <div class="aboutSquares market"><a href="#">MARKET </a></div>
     	   		   <div class="aboutSquares staff"><a href="#">STAFF </a></div>
     	   		   <div class="aboutSquares service"><a href="#">SERVICE </a></div>
     		   	<div class="company_info info">
    		   		<h2>COMPANY</h2>
    			 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    		   </div>
     		   	<div class="market_info info">
    		   		<h2>MARKET</h2>
    			 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    		   </div>
     		   	<div class="staff_info info">
    		   		<h2>STAFF</h2>
    			 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    		   </div>
     		   	<div class="service_info info">
    		   		<h2>SERVICE</h2>
    			 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    		   </div>
    		    </div>
    hope that helps.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thinking about it... this could be an improved, and far more semantic, approach:
    Code:
    		<style type="text/css">
    		.squareWrapper{ list-style: none; padding:0; margin:0; position: relative; width:250px;}
    		.info{display:none;  width: 35em; position: absolute; padding-left:1em}
    		.squareWrapper li { float:left;  background: pink; }
    		.squareWrapper li  a:after{ content:''; position: absolute; height:100%; width:100%; top:0; left:0;  }
    		.squareWrapper li  a { position:relative;height:125px;  width:125px; display:block;}
    		 li.company a:after{ background:  red}
    		 li.market a:after{ background:  pink}
     		 li.staff a:after{ background: orange}
    		 li.service a:after{ background: aqua}
    
    
    		 .squareWrapper li:hover .info {display:block; left:100%; top:0}
    
    		 	</style>
    		
    		
    		   <ul class="squareWrapper">
     	   		   <li class=" company"><a href="#">COMPANY  </a>
    		 		   	<div class="info">
    				   		<h2>COMPANY</h2>
    					 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    				   </div>
     	   		   </li>
     	   		   <li class=" market"><a href="#">MARKET </a>
    		 		   	<div class="info">
    				   		<h2>MARKET</h2>
    					 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    				   </div>
     	   		   </li>
     	   		   <li class=" staff"><a href="#">STAFF </a>
    		 		   	<div class="info">
    				   		<h2>STAFF</h2>
    					 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    				   </div>
     	   		   
     	   		   </li>
     	   		   <li class=" service"><a href="#">SERVICE </a>
     	   		   
    		 		   	<div class="info">
    				   		<h2>SERVICE</h2>
    					 	<p >Since 1984, Morris, Smith & Feyh Incorporated has helped our borrowers close over $4.0 billion of commercial real estate loans.  MS&F regularly receives several "Top Producer" awards from its correspondent lending institutions and consistently ranks near the top of Columbus area commercial real estate lenders in volume by "Business First". The firm is nationally ranked by the Mortgage Bankers Association as one of the top commercial mortgage bankers as measured in both loan origination and in loan servicing. Numerous nationally recognized and localized borrowers have relied on MS&F to arrange financing and have benefited by our firms ability to deliver loan terms tailored to their needs, on a timely and highly competitive basis.</p>
    				   </div>
     	   		   </li>
     		    </ul>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •