Solved

Hover Div CSS question

Posted on 2013-11-05
2
351 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

752 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