Solved

Hover Div CSS question

Posted on 2013-11-05
2
350 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

830 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