Solved

Hover Div CSS question

Posted on 2013-11-05
2
349 Views
Last Modified: 2013-11-05
On trulia.com when you are looking at a property results page and you hover over a div, then hidden divs inside the main div are made visible. I want to recreate this effect on my site (I'm using Twitter bootstrap 2.3).

Can this be done using only CSS? Please post example code to get me started.
Thanks!

http://www.trulia.com/for_sale/Seattle,WA/4p_beds/
0
Comment
Question by:Bang-O-Matic
2 Comments
 
LVL 3

Accepted Solution

by:
mikeyd234 earned 500 total points
ID: 39626154
HTML
<div class="parent">
    <p>Hello, I'm a child...</p>
    <p class="hidden">..and so am I but I'm hidden.</p>
</div>

Open in new window


CSS
.hidden { display:none; }
.parent:hover .hidden { display:block; }

Open in new window


http://jsfiddle.net/553tk/ 

:)
0
 

Author Closing Comment

by:Bang-O-Matic
ID: 39626182
Exactly what I needed! Thanks!
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question