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

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

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.

Thanks for the info.

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.

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.

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:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

[COLOR="#FF0000"][I]your CSS here[/I][/COLOR]

</style>
	
</head>
<body>

[COLOR="#FF0000"][I]your HTML here[/I][/COLOR]

</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.

<div class="aboutSquares">
    <h2>COMPANY</h2>
    <a href="#">
        <span class="company">
            [COLOR="#FF0000"] <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>[/COLOR]
        </span>
    </a>  		   
</div>
	
	   		   

			   

This worked nicely!

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

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.

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

Thinking about it… this could be an improved, and far more semantic, approach:

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