How can make li appear some content when mouse hover

Question

<div id="div_name">
<ul>
<li><img src="" /> <div class="hidden_area"></div></li>
<li><img src="" /> <div class="hidden_area">Lorem Ipsum</div></li>
<li><img src="" /> <div class="hidden_area">Lorem Ipsum</div></li>
</ul>
</div>

In main css the .hidden_area is not appear I use overflow:hidden but i want when mouse hover make .hidden_area visible and over all content with position: absolute;

this image explain what i want http://filaty.com/i/alpha/06/06b6537a389323792ffa483e07167105

I try by add position : relative; to <li> and add position :absolute; to .hidden_area and change top value for .hidden_area , but it's not working :(

This is example : http://jsfiddle.net/qaYG5/

Sorry bad english :)

Answer 1

Use a :hover pseudo class to change the display property of .hidden_area. Set position:absolute on your .hidden_area class and position it using the top property.

    .hidden_area{
    position:absolute;
    top:200px; // the height of your <li>
    display:none;
}

li:hover .hidden_area{
    display:block;
    }

JSFIDDLE

EDIT: Here it is using your JSFiddle: Your JSFiddle

Remove overflow:hidden, it was hiding your .hidden_area divs. Instead, hide the .hidden_area with display:none and show it with display:block (use *li:hover .hidden_area*)

Answer 2

If I understand you well you need a simple hover so...try this. Here's a FIDDLE

#div_name {
  width: 630px;
  height: 200px;
  margin: 20px auto;
  border: 1px solid #999;
}
ul li {
  background: #252525;
  list-style: none;
  float: left;
  width: 170px;
  height: 170px;
  margin: 10px 15px 10px 15px;
  padding: 5px;
  font-family: Verdana;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
}
.hidden_area {
  background: #892b2b;
  position: absolute;
  display: none;
  width: 170px;
  height: 130px;
  margin-top: 157px;
  margin-left: -5px;
  padding: 5px;
  text-align: center;
}
ul li:hover .hidden_area {
  display: block;
}

Answer 3

Here is the fiddle: http://jsfiddle.net/MfegM/1169/

You have an UL and 3 LI inside right?

And you want that when user hover

Use jQuery UI Tabs():

HTML:

<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="content">
        <div id="tabs-1">content 1.</div>
        <div id="tabs-2">content 2.</div>
        <div id="tabs-3">content 3.</div>
    </div>
</div>

JQUERY:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="JQUERY_UI"></script> //Find it at http://jqueryui.com/download/

<script>
$(function() {
    $( "#tabs" ).tabs();

    // Hover states on the static widgets
    $( "#dialog-link, #icons li" ).hover(
        function() {
            $( this ).addClass( "ui-state-hover" );
        },
        function() {
            $( this ).removeClass( "ui-state-hover" );
        }
    );
});
</script>

CSS: You will receive the full file.css in jquery.ui download. Or use this:

.ui-tabs {
    position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

#content {
    clear: both;
    margin-top: 15px;
}

Answer 4

Here's something I built. Not exact..because I don't know what you are doing in CSS, but this should help and give you an idea of how to do it.

Fiddle link

ul li {
   height: 100px;
   width:100px;
   background: red;
   margin: 10px;
   padding: 5px;
   list-style: none outside none;
   float:left;
}
div.hidden_area{
    display:none;
}

ul li:hover > .hidden_area{
   display:block;
   margin:80px 0 0 0;
   width:105px;
   height: 200px;
   background: black;
   color:blue;
   overflow:auto;
   z-index: 100;
}

.clear{
    clear:both;
    width:500px;
    height: 200px;
    border: 1px solid #000000;
}